您的位置：首页 > Web前端

Ferris教程学习笔记:js示例2.11 图片列表：鼠标移入/移出改变图片透明度

2013-12-12 11:29 681 查看
//思路:
//通过透明度的变化实现效果
1:注意代码a 清除元素class值
2:注意代码b 当前元素添加class值

这个示例需要几张图片，在随笔中没有发现上传附件的功能，你需要去Ferris 站点下载 :(

http://js.fgm.cc/learn/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>图片列表：鼠标移入/移出改变图片透明度</title>
<style type="text/css">
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>
</head>
<body>
<ul id="imgList">
<li class=""><img src="06/1.jpg"></li>
<li class=""><img src="06/2.jpg"></li>
<li class=""><img src="06/3.jpg"></li>
<li class=""><img src="06/4.jpg"></li>
<li class=""><img src="06/5.jpg"></li>
<li class=""><img src="06/6.jpg"></li>
<li class=""><img src="06/7.jpg"></li>
<li class=""><img src="06/8.jpg"></li>
<li class=""><img src="06/9.jpg"></li>
<li class=""><img src="06/10.jpg"></li>
</ul>

<script type="text/javascript">

//思路:
//通过透明度的变化实现效果
//1:注意代码a  清除元素class值
//2:注意代码b  当前元素添加class值
window.onload = function(){
var lis = document.getElementsByTagName("li");
var size = lis.length;
for(var i=0;i<size;i++){

lis[i].onmouseover = function(){
//a:当空所有列表样式
for(p in lis)lis[p].className = "";
//b:当前元素添加current样式
this.className = "current";

};

}
};
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航