css静态滤镜 + a:hover

随便写个 css静态滤镜 + a:hover 的效果，就当给菜鸟们学习的吧.....

ie only

运行代码框
step1:<!doctype <a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> public "-//w3c//dtd x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> 1.0 transitional//en" "http://www.w3.org/tr/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>1/dtd/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>1-transitional.dtd"><<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>><head><meta http-equiv="content-type" content="text/<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>; charset=gb2312" /><title>wu xin</title><script type="text/<a href="/list/javascript/index.html" title="javascript" target="_blank"><acronym>javascript</acronym></a>" 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/2006/06/3619/01.jpg" class="i1" /></a> <a href="#" class="a0 a2"><img src="/articleimg/2006/06/3619/02.jpg" class="i1" /></a> <a href="#" class="a0 a3"><img src="/articleimg/2006/06/3619/03.jpg" class="i1" /></a> <a href="#" class="a0 a4"><img src="/articleimg/2006/06/3619/04.jpg" class="i1" /></a> <a href="#" class="a0 a5"><img src="/articleimg/2006/06/3619/05.jpg" class="i1" /></a> <a href="#" class="a0 a6"><img src="/articleimg/2006/06/3619/06.jpg" class="i1" /></a> <a href="#" class="a0 a7"><img src="/articleimg/2006/06/3619/07.jpg" class="i1" /></a></div></body></<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

然后配合上两行 js, 做成这样,依然 ie only
step2:

继续努力，加上磁性效果............就是测试久了会看的头晕.......
step3:

运行代码框
<!doctype <a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> public "-//w3c//dtd x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> 1.0 transitional//en" "http://www.w3.org/tr/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>1/dtd/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>1-transitional.dtd"><<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>><head><meta http-equiv="content-type" content="text/<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>; charset=gb2312" /><title>wu xin</title><script type="text/<a href="/list/javascript/index.html" title="javascript" target="_blank"><acronym>javascript</acronym></a>">/* 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/2006/06/3619/01.jpg" class="i1" /></a> <a href="#" class="a0 a2"><img src="/articleimg/2006/06/3619/02.jpg" class="i1" /></a> <a href="#" class="a0 a3"><img src="/articleimg/2006/06/3619/03.jpg" class="i1" /></a> <a href="#" class="a0 a4"><img src="/articleimg/2006/06/3619/04.jpg" class="i1" /></a> <a href="#" class="a0 a5"><img src="/articleimg/2006/06/3619/05.jpg" class="i1" /></a> <a href="#" class="a0 a6"><img src="/articleimg/2006/06/3619/06.jpg" class="i1" /></a> <a href="#" class="a0 a7"><img src="/articleimg/2006/06/3619/07.jpg" class="i1" /></a></div></body></<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

上一个效果鼠标动的快了会很头晕.......又做了一个磁性效果
step4:

运行代码框
<!doctype <a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> public "-//w3c//dtd x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> 1.0 transitional//en" "http://www.w3.org/tr/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>1/dtd/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>1-transitional.dtd"><<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>><head><meta http-equiv="content-type" content="text/<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>; charset=gb2312" /><title>wu xin</title><script type="text/<a href="/list/javascript/index.html" title="javascript" target="_blank"><acronym>javascript</acronym></a>">/* 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/2006/06/3619/01.jpg" class="i1" /></a> <a href="#" class="a0 a2"><img src="/articleimg/2006/06/3619/02.jpg" class="i1" /></a> <a href="#" class="a0 a3"><img src="/articleimg/2006/06/3619/03.jpg" class="i1" /></a> <a href="#" class="a0 a4"><img src="/articleimg/2006/06/3619/04.jpg" class="i1" /></a> <a href="#" class="a0 a5"><img src="/articleimg/2006/06/3619/05.jpg" class="i1" /></a> <a href="#" class="a0 a6"><img src="/articleimg/2006/06/3619/06.jpg" class="i1" /></a> <a href="#" class="a0 a7"><img src="/articleimg/2006/06/3619/07.jpg" class="i1" /></a></div></body></<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

然后再加上一些不知所谓的特效，让这个东东有点动感（小新：看我的动感光波，bbbbb........） -_-

step 5: （永远的 ie only）

运行代码框
<!doctype <a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> public "-//w3c//dtd x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> 1.0 transitional//en" "http://www.w3.org/tr/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>1/dtd/x<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>1-transitional.dtd"><<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>><head><meta http-equiv="content-type" content="text/<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>; charset=gb2312" /><title>wu xin</title><script type="text/<a href="/list/javascript/index.html" title="javascript" target="_blank"><acronym>javascript</acronym></a>">/* 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></<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

ICP备案编号:粤ICP备06052964号

www.sosof.com

选择显示字体大小

css静态滤镜 + a:hover

关键字本文所属关键字

相关与本文相关文章

分类所有文章关键字导航

源码编程相关

SQL数据库相关

手机无线相关

网页设计制作相关

网站建设推广相关

操作系统/服务器相关

图形图像多媒体相关

标准网站致力的规范

www.sosof.com

选择显示字体大小

css静态滤镜 + a:hover

shouchang();

关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

SQL数据库相关

手机无线相关

网页设计制作相关

网站建设推广相关

操作系统/服务器相关

图形图像多媒体相关

标准 网站致力的规范

关键字本文所属关键字

相关与本文相关文章

分类所有文章关键字导航

标准网站致力的规范