您的位置：首页 > Web前端 > JavaScript

js实现鼠标的移入移出控制图片的明暗显示

2015-04-07 19:43 731 查看

这是具体的样式，用的是无序列表。

去除列表样式原有的样式；宽度；高度跟随内容变化（不设置；居中；黑色边框，内边距；设置内容与元素框的关系，使用overflow（规定如何处理不符合元素框的内容）

在每个li里面放置img

设置li的高度与宽度；元素浮动；边框；外边距上10px，下10px 左右为0；

img 设置向左浮动；透明度；滤镜再次设置（可以不用）;鼠标移入移出时的变化；

给li添加class，通过js来控制该class的添加与取消；该类写上移入时的透明度

贴上代码：

ul,li{
margin: 0;
padding: 0;
list-style-type: none;
}
#mylist{
margin: 0 auto;
width: 700px;
border: 1px solid #333;
padding: 0 0 10px 10px;
overflow: hidden;
/*	zoom:1;*/
}
#mylist li{
float: left;
width: 128px;
height: 128px;
border: 1px solid #ccc;
margin: 10px 10px 0 0;
}
#mylist li img{
float: left;
opacity: 0.3;
cursor: crosshair;
filter: alpha(opacity==30);
}
#mylist li.current img{
opacity: 1;
filter: alpha(opacity==100);
}

js:通过dom操作找到li标签（其实在css写类时可以写在img里，通过dom找img标签一样实现）

使用循环确定鼠标移入时停在某一个li上面，找到停留的li并添加onmouseover事件。通过this关键字添加该类；实现移入时的变化；

通过onmouseout事件实现移出时的效果：

var i = document.getElementsByTagName("img");
for (var c = 0;c<i.length;c++)
{
i[c].onmouseover = function()
{
this.className = "current";
}
i[c].onmouseout = function(){
this.className ="";
}
}

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="d.css">
</head>

<body>
<ul id="mylist">
<li><img src="images/1.jpg" alt="1">
</li>
<li><img src="images/2.jpg" alt="2">
</li>
<li><img src="images/3.jpg" alt="3">
</li>
<li><img src="images/4.jpg" alt="4">
</li>
<li><img src="images/5.jpg" alt="5">
</li>
<li><img src="images/6.jpg" alt="6">
</li>
<li><img src="images/7.jpg" alt="7">
</li>
<li><img src="images/8.jpg" alt="8">
</li>
<li><img src="images/9.jpg" alt="9">
</li>
<li><img src="images/10.jpg" alt="10">
</li>
</ul>
<script src="d.js"></script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航