Home >Web Front-end >JS Tutorial >css static filter A:Hover effect page 1/3_javascript skills
css static filter A:Hover effect page 1/3_javascript skills
- PHP中文网Original
- 2016-05-16 19:13:021591browse
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> Then match the last two lines of JS to make it like this
Still 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>Continue Try hard and add the magnetic effect... you will feel dizzy after testing for a long time...
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>Previous effect If you move the mouse too fast, you will feel dizzy...
I made another magnetic effect
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>Then I added some unknown special effects to make this Dongdong is a bit dynamic (Xiaoxin: Look at my dynamic light waves, BBBBB...) -_-
Step 5: (Forever 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 value code for the ID value of the current DIV_javascript skillsNext article：JS value code for the ID value of the current DIV_javascript skills
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills