 |
热门文章 |
|
|
|
|
| 鼠标移入/移出改变图片透明度 |
| 来源：源码爱好者 更新时间：2012/3/6 22:53:25 阅读次数： 我要投稿 |
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片列表：鼠标移入/移出改变图片透明度</title>
<style>
ul,li{margin:0;padding:0;list-style-type:none;}
#imgList{width:700px;overflow:hidden;zoom:1;border:1px solid #333;margin:0 auto;padding:0 0 10px 10px;}
#imgList li{float:left;width:128px;height:128px;border:1px solid #ccc;margin:10px 10px 0 0;}
#imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}
#imgList li.current img{opacity:1;filter:alpha(opacity=100);}
</style>
<script>
window.onload = function ()
{
var oLi = document.getElementsByTagName("li");
for (var i = 0; i < oLi.length; i++)
{
oLi[i].onmouseover = function ()
{
this.className = "current"
};
oLi[i].onmouseout = function ()
{
this.className = ""
}
}
}
</script>
</script></head>
<body>
<ul id="imgList">
<li><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201203/2012030622545962.jpg" /></li>
<li><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201203/2012030622553712.jpg" /></li>
</ul>
</body>
</html> |
| 特效说明： |
鼠标移入/移出改变图片透明度，你可以依次往下添加图片，只要是在imgList列表内的图片，都可以实现本鼠标效果，其实用CSS也可以实现，不过考虑兼容性方面，加入了部分JavaScript代码，希望能为您做参考。 |
|
| 上一篇文章： 原生JS面向对象的带左右滚动的Js焦点图下一篇文章： 一个横向滑动的图片切换容器代码 |
|
|
|
注册 登录
