css静态滤镜 + A:Hover

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: 小|中|大|超大  

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

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="http://www.blueidea.com/articleimg/2006/06/3619/01.jpg" class="i1" /></a>

<a href="#" class="a0 a2">

<img src="http://www.blueidea.com/articleimg/2006/06/3619/02.jpg" class="i1" /></a>

<a href="#" class="a0 a3">

<img src="http://www.blueidea.com/articleimg/2006/06/3619/03.jpg" class="i1" /></a>

<a href="#" class="a0 a4">

<img src="http://www.blueidea.com/articleimg/2006/06/3619/04.jpg" class="i1" /></a>

<a href="#" class="a0 a5">

<img src="http://www.blueidea.com/articleimg/2006/06/3619/05.jpg" class="i1" /></a>

<a href="#" class="a0 a6">

<img src="http://www.blueidea.com/articleimg/2006/06/3619/06.jpg" class="i1" /></a>

<a href="#" class="a0 a7">

<img src="http://www.blueidea.com/articleimg/2006/06/3619/07.jpg" class="i1" /></a>

</div>

</body>

</html>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

然后配合上两行 JS, 做成这样,依然 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="http://www.blueidea.comhttp://www.blueidea.com/articleimg/2006/06/3619/01.jpg" class="i1" /></a>

<a href="#" class="a0 a2">

<img src="http://www.blueidea.comhttp://www.blueidea.com/articleimg/2006/06/3619/02.jpg" class="i1" /></a>

<a href="#" class="a0 a3">

<img src="http://www.blueidea.comhttp://www.blueidea.com/articleimg/2006/06/3619/03.jpg" class="i1" /></a>

<a href="#" class="a0 a4">

<img src="http://www.blueidea.comhttp://www.blueidea.com/articleimg/2006/06/3619/04.jpg" class="i1" /></a>

<a href="#" class="a0 a5">

<img src="http://www.blueidea.comhttp://www.blueidea.com/articleimg/2006/06/3619/05.jpg" class="i1" /></a>

<a href="#" class="a0 a6">

<img src="http://www.blueidea.comhttp://www.blueidea.com/articleimg/2006/06/3619/06.jpg" class="i1" /></a>

<a href="#" class="a0 a7">

<img src="http://www.blueidea.comhttp://www.blueidea.com/articleimg/2006/06/3619/07.jpg" class="i1" /></a>

</div>

</body>

</html>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

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

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="http://www.blueidea.com/articleimg/2006/06/3619/01.jpg" class="i1" /></a>

<a href="#" class="a0 a2">

<img src="http://www.blueidea.com/articleimg/2006/06/3619/02.jpg" class="i1" /></a>

<a href="#" class="a0 a3">

<img src="http://www.blueidea.com/articleimg/2006/06/3619/03.jpg" class="i1" /></a>

<a href="#" class="a0 a4">

<img src="http://www.blueidea.com/articleimg/2006/06/3619/04.jpg" class="i1" /></a>

<a href="#" class="a0 a5">

<img src="http://www.blueidea.com/articleimg/2006/06/3619/05.jpg" class="i1" /></a>

<a href="#" class="a0 a6">

<img src="http://www.blueidea.com/articleimg/2006/06/3619/06.jpg" class="i1" /></a>

<a href="#" class="a0 a7">

<img src="http://www.blueidea.com/articleimg/2006/06/3619/07.jpg" class="i1" /></a>

</div>

</body>

</html>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

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

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.scrollT

[1] [2] 下一页

 
 
 
免责声明：本文为网络用户发布，其观点仅代表作者个人观点，与本站无关，本站仅提供信息存储服务。文中陈述内容未经本站证实，其真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航