IE only
STEP1:
<! 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" "></script> & lt;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> </pead> <body> <div id= "" > &L T;/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 such
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:1pxSolid #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.
Current 1/3 page
123 Next read the full text
