Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

css static filter A:Hover effect page 1/3_javascript skills

PHP中文网
Release： 2016-05-16 19:13:02
Original
1564 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login
Related labels：
+ Effect
source：php.cn
Previous article：JS value code for the ID value of the current DIV_javascript skills Next article：JSON learning complete manual with pictures and text_javascript skills
Statement of this Website
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
Latest Articles by Author
Latest Issues
Launch a transparent browser to improve the experience of web applications and PWA [support static HTML, CSS and JavaScript] [allow users to view desktop wallpapers in our web applications/PWA] I'm a junior front-end developer and designer currently developing a web application (chat...
From 2024-04-05 13:50:12
0
1
1367
CSS row class makes some elements go out of frame, while they should be static and fixed to the bottom of the display My page currently looks like this. After adding the row class so that the two elements are...
From 2024-04-03 18:48:12
0
1
281
Can't apply CSS filter on hover in Safari I noticed that making changes to the filter property on hover causes strange behavior in S...
From 2024-04-01 08:19:51
0
1
387
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template