Maison > Article > interface Web > css静态滤镜 + A:Hover 效果第1/3页_javascript技巧
css静态滤镜 + A:Hover 效果第1/3页_javascript技巧
- PHP中文网original
- 2016-05-16 19:13:021552parcourir
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>Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JS值当前DIV的ID值的代码_javascript技巧Article suivant：JSON 学习之完全手册 图文_javascript技巧
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript