CSS static filters + a:hover effects
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <!--author:hutia--> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>wu xin</title> <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;} . a6 {border:1px solid #999; a6:hover {border:1px solid blACK;} . A7 {border:1px solid #999; a7:hover {border:1px solid #FEE;} </style> </pead> <body> <div id= "" > </div> </body > </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
then with the two lines of JS, made so, still IE only
STEP2:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <!--author:hutia--> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>wu xin</title> <script type=" Text/javascript ">/* Author:hutia * * FU Nction 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;} . a6 {border:1px solid #999; a6:hover {border:1px solid black;} . A7 {border:1px solid #999; a7:hover {border:1px solid #FEE;} </style> </pead> <body> <div id= "main" onmousemove= "Chkscroll (this);" > </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Keep working hard, add magnetic effects ..... Is the test for a long time will look dizzy.
STEP3:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <!--author:hutia--> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>wu xin</title> <script type=" Text/javascript ">/* Author:hutia * * FU Nction 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;} . a6 {border:1px solid #999; a6:hover {border:1px solid black;} . A7 {border:1px solid #999; a7:hover {border:1px solid #FEE;} </style> </pead> <body> <div id= "main" onmousemove= "Chkscroll (this);" > </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The last effect of the mouse moving fast will be very dizzy .... and made a magnetic effect.
STEP4:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <!--author:hutia--> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>wu xin</title> <script type=" Text/javascript ">/* Author:hutia * * FU Nction 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;} . a6 {border:1px solid #999; a6:hover {border:1px solid black;} . A7 {border:1px solid #999; a7:hover {border:1px solid #FEE;} </style> </pead> <body> <div id= "main" onmousemove= "Chkscroll (this);" > </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
And then add some do not know the so-called special effects, let this dongdong a bit of movement (Nova: see my motion light, bbbbb ... ） -_-
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <!--author:hutia--> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>wu xin</title> <script type=" Text/javascript ">/* Author:hutia * * FU Nction 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;} . a6 {border:1px solid #999; a6:hover {border:1px solid black;} . A7 {border:1px solid #999; a7:hover {border:1px solid #FEE;} </style> </pead> <body> <div id= "main" onmousemove= "Chkscroll (this);" onmouseout= "Hidepointer () ;" > </div> <div id= "pointer" ></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
