Home > Article > Web Front-end > css静态滤镜 + A:Hover 效果第1/3页_javascript技巧
css静态滤镜 + A:Hover 效果第1/3页_javascript技巧
- PHP中文网Original
- 2016-05-16 19:13:021518browse
IE Only
Step1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Author: Hutia -->
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>WU XIN</title>
<script type="text/javascript" src=""></script>
<style>
* { margin:0px; padding:0px; }
.i1 { width:64px; border:0px none #888; margin:0px; }
.a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; }
.a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; }
.a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;}
.a2 { border:1px solid #999; } .a2:hover { border:1px solid green; }
.a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;}
.a4 { border:1px solid #999; } .a4:hover { border:1px solid red;}
.a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;}
.a6 { border:1px solid #999; } .a6:hover { border:1px solid black;}
.a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;}
</style>
</head>
<body>
<div id="">
<a href="#" class="a0 a1">
<img src="/articleimg/upload/2006/6/17/2620257_1_j.jpg" class="i1" /></a>
<a href="#" class="a0 a2">
<img src="/articleimg/upload/2006/6/17/2620257_2_m.jpg" class="i1" /></a>
<a href="#" class="a0 a3">
<img src="/articleimg/upload/2006/6/17/2620257_3_s.jpg" class="i1" /></a>
<a href="#" class="a0 a4">
<img src="/articleimg/upload/2006/6/17/2620257_4_h.jpg" class="i1" /></a>
<a href="#" class="a0 a5">
<img src="/articleimg/upload/2006/6/17/2620257_5_t.jpg" class="i1" /></a>
<a href="#" class="a0 a6">
<img src="/articleimg/upload/2006/6/17/2620257_6_yi.jpg" class="i1" /></a>
<a href="#" class="a0 a7">
<img src="/articleimg/upload/2006/6/17/2620257_7_ya.jpg" class="i1" /></a>
</div>
</body>
</html>然后配合上两行 JS, 做成这样
依然 IE Only
Step2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Author: Hutia -->
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>WU XIN</title>
<script type="text/javascript">
/* Author: Hutia */
function chkScroll(obj){
var y0=obj.offsetTop, y=event.y, h0=obj.offsetHeight, h1=obj.scrollHeight;
obj.scrollTop=parseInt((y-y0)/h0*(h1-h0));
}
</script>
<style>
* { margin:0px; padding:0px; }
#main { height:198px; width:66px; overflow:hidden; }
.i1 { width:64px; border:0px none #888; margin:0px; }
.a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; }
.a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; }
.a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;}
.a2 { border:1px solid #999; } .a2:hover { border:1px solid green; }
.a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;}
.a4 { border:1px solid #999; } .a4:hover { border:1px solid red;}
.a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;}
.a6 { border:1px solid #999; } .a6:hover { border:1px solid black;}
.a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;}
</style>
</head>
<body>
<div id="main" onmousemove="chkScroll(this);">
<a href="#" class="a0 a1">
<img src="/articleimg/upload/2006/6/17/2620257_1_j.jpg" class="i1" /></a>
<a href="#" class="a0 a2">
<img src="/articleimg/upload/2006/6/17/2620257_2_m.jpg" class="i1" /></a>
<a href="#" class="a0 a3">
<img src="/articleimg/upload/2006/6/17/2620257_3_s.jpg" class="i1" /></a>
<a href="#" class="a0 a4">
<img src="/articleimg/upload/2006/6/17/2620257_4_h.jpg" class="i1" /></a>
<a href="#" class="a0 a5">
<img src="/articleimg/upload/2006/6/17/2620257_5_t.jpg" class="i1" /></a>
<a href="#" class="a0 a6">
<img src="/articleimg/upload/2006/6/17/2620257_6_yi.jpg" class="i1" /></a>
<a href="#" class="a0 a7">
<img src="/articleimg/upload/2006/6/17/2620257_7_ya.jpg" class="i1" /></a>
</div>
</body>
</html>继续努力，加上磁性效果............就是测试久了会看的头晕.......
Step3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Author: Hutia -->
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>WU XIN</title>
<script type="text/javascript">
/* Author: Hutia */
function chkScroll(obj){
var y0=obj.offsetTop, y=event.y, h0=obj.offsetHeight, h1=obj.scrollHeight;
var sT=parseInt((y-y0)/h0*(h1-h0));
var dif=sT+y-y0-33;
if(dif%66<12)sT-=dif%66;
if(dif%66>54)sT=sT-dif%66+66;
obj.scrollTop=sT;
}
</script>
<style>
* { margin:0px; padding:0px; }
#main { height:198px; width:66px; overflow:hidden; }
.i1 { width:64px; border:0px none #888; margin:0px; }
.a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; }
.a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; }
.a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;}
.a2 { border:1px solid #999; } .a2:hover { border:1px solid green; }
.a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;}
.a4 { border:1px solid #999; } .a4:hover { border:1px solid red;}
.a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;}
.a6 { border:1px solid #999; } .a6:hover { border:1px solid black;}
.a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;}
</style>
</head>
<body>
<div id="main" onmousemove="chkScroll(this);">
<a href="#" class="a0 a1">
<img src="/articleimg/upload/2006/6/17/2620257_1_j.jpg" class="i1" /></a>
<a href="#" class="a0 a2">
<img src="/articleimg/upload/2006/6/17/2620257_2_m.jpg" class="i1" /></a>
<a href="#" class="a0 a3">
<img src="/articleimg/upload/2006/6/17/2620257_3_s.jpg" class="i1" /></a>
<a href="#" class="a0 a4">
<img src="/articleimg/upload/2006/6/17/2620257_4_h.jpg" class="i1" /></a>
<a href="#" class="a0 a5">
<img src="/articleimg/upload/2006/6/17/2620257_5_t.jpg" class="i1" /></a>
<a href="#" class="a0 a6">
<img src="/articleimg/upload/2006/6/17/2620257_6_yi.jpg" class="i1" /></a>
<a href="#" class="a0 a7">
<img src="/articleimg/upload/2006/6/17/2620257_7_ya.jpg" class="i1" /></a>
</div>
</body>
</html>上一个效果鼠标动的快了会很头晕.......
又做了一个磁性效果
Step4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Author: Hutia -->
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>WU XIN</title>
<script type="text/javascript">
/* Author: Hutia */
function chkScroll(obj){
var y0=obj.offsetTop, y=event.y, h0=obj.offsetHeight, h1=obj.scrollHeight;
var sT=parseInt((y-y0)/h0*(h1-h0));
if(sT%66<10)sT-=sT%66;
if(sT%66>56)sT=sT-sT%66+66;
obj.scrollTop=sT;
}
</script>
<style>
* { margin:0px; padding:0px; }
#main { height:198px; width:66px; overflow:hidden; }
.i1 { width:64px; border:0px none #888; margin:0px; }
.a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; }
.a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; }
.a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;}
.a2 { border:1px solid #999; } .a2:hover { border:1px solid green; }
.a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;}
.a4 { border:1px solid #999; } .a4:hover { border:1px solid red;}
.a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;}
.a6 { border:1px solid #999; } .a6:hover { border:1px solid black;}
.a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;}
</style>
</head>
<body>
<div id="main" onmousemove="chkScroll(this);">
<a href="#" class="a0 a1">
<img src="/articleimg/upload/2006/6/17/2620257_1_j.jpg" class="i1" /></a>
<a href="#" class="a0 a2">
<img src="/articleimg/upload/2006/6/17/2620257_2_m.jpg" class="i1" /></a>
<a href="#" class="a0 a3">
<img src="/articleimg/upload/2006/6/17/2620257_3_s.jpg" class="i1" /></a>
<a href="#" class="a0 a4">
<img src="/articleimg/upload/2006/6/17/2620257_4_h.jpg" class="i1" /></a>
<a href="#" class="a0 a5">
<img src="/articleimg/upload/2006/6/17/2620257_5_t.jpg" class="i1" /></a>
<a href="#" class="a0 a6">
<img src="/articleimg/upload/2006/6/17/2620257_6_yi.jpg" class="i1" /></a>
<a href="#" class="a0 a7">
<img src="/articleimg/upload/2006/6/17/2620257_7_ya.jpg" class="i1" /></a>
</div>
</body>
</html>然后再加上一些不知所谓的特效，让这个东东有点动感（小新：看我的动感光波，BBBBB........） -_-
Step 5: （永远的 IE Only）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Author: Hutia -->
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>WU XIN</title>
<script type="text/javascript">
/* Author: Hutia */
function chkScroll(obj){
var y0=obj.offsetTop, y=event.y, h0=obj.offsetHeight, h1=obj.scrollHeight, currentNode;
var sT=parseInt((y-y0)/h0*(h1-h0));
var pT=document.getElementById("pointer");
if(sT%66<10)sT-=sT%66;
if(sT%66>56)sT=sT-sT%66+66;
obj.scrollTop=sT;
currentNode=obj.children[parseInt((sT+y-y0)/66)];
if(!currentNode)return;
with(pT.style){
display="block";
backgroundColor=currentNode.currentStyle.borderColor;
pT.baseY=top=currentNode.offsetTop-sT;
left=currentNode.offsetLeft+currentNode.offsetWidth+2;
}
}
function crazyPointer(){
try{
var pT=document.getElementById("pointer");
if(isNaN(parseInt(pT.baseY)))pT.baseY=0;
if(isNaN(parseInt(pT.y)))pT.y=0;
if(isNaN(parseInt(pT.h)))pT.h=0;
if(isNaN(parseInt(pT.vy)))pT.vy=1;
if(isNaN(parseInt(pT.vh)))pT.vh=1;
pT.y+=pT.vy*parseInt(Math.random()*3);
if(pT.y>65){pT.y=65;pT.vy=-1;}
if(pT.y<0){pT.y=0;pT.vy=1;}
pT.h+=pT.vh*parseInt(Math.random()*7);
if(pT.y+pT.h>65){pT.h=65-pT.y;pT.vh=-1;}
if(pT.h<0){pT.h=1;pT.vh=1;}
pT.style.top=pT.baseY+pT.y;
pT.style.height=pT.h;
}catch(e){}
setTimeout(crazyPointer,10);
}
function hidePointer(){
document.getElementById("pointer").style.display="none";
}
crazyPointer();
</script>
<style>
* { margin:0px; padding:0px; }
#main { height:198px; width:66px; overflow:hidden; }
#pointer { display:none; position:absolute; width:3px; overflow:hidden; }
.i1 { width:64px; border:0px none #888; margin:0px; }
.a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; }
.a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; }
.a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;}
.a2 { border:1px solid #999; } .a2:hover { border:1px solid green; }
.a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;}
.a4 { border:1px solid #999; } .a4:hover { border:1px solid red;}
.a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;}
.a6 { border:1px solid #999; } .a6:hover { border:1px solid black;}
.a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;}
</style>
</head>
<body>
<div id="main" onmousemove="chkScroll(this);" onmouseout="hidePointer();">
<a href="#" class="a0 a1">
<img src="/articleimg/upload/2006/6/17/2620257_1_j.jpg" class="i1" /></a>
<a href="#" class="a0 a2">
<img src="/articleimg/upload/2006/6/17/2620257_2_m.jpg" class="i1" /></a>
<a href="#" class="a0 a3">
<img src="/articleimg/upload/2006/6/17/2620257_3_s.jpg" class="i1" /></a>
<a href="#" class="a0 a4">
<img src="/articleimg/upload/2006/6/17/2620257_4_h.jpg" class="i1" /></a>
<a href="#" class="a0 a5">
<img src="/articleimg/upload/2006/6/17/2620257_5_t.jpg" class="i1" /></a>
<a href="#" class="a0 a6">
<img src="/articleimg/upload/2006/6/17/2620257_6_yi.jpg" class="i1" /></a>
<a href="#" class="a0 a7">
<img src="/articleimg/upload/2006/6/17/2620257_7_ya.jpg" class="i1" /></a>
</div>
<div id="pointer"></div>
</body>
</html>Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JS值当前DIV的ID值的代码_javascript技巧Next article：JSON 学习之完全手册 图文_javascript技巧