html和css 仅为布局，需要注意的是filter对应的是老版本的ie浏览器透明度，而opacity对应的其他浏览器的透明度
filter: alpha(opacity: 50);
opacity: 0.5;
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} div {
margin: 10px;
height: 360px;
width: 200px;
} ul {
list-style: none;
} ul li {
width: 200px;
height: 100px;
background: blue;
margin-bottom: 20px;
cursor: pointer;
filter: alpha(opacity: 50);
opacity: 0.5;
}
</style>
</head> <body>
<div>
<ul id="squLi">
<li></li>
<li></li>
<li></li>
</ul>
</div> </body> </html>
js部分也是通过for循环来给每个li标签都加入一个鼠标触发事件
<script type="text/javascript">
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
//自定义变量为li标签的集合
var aLi = $("squLi").getElementsByTagName("li"); //通过for循环给每个li都添加一个触发效果
for (var i = 0; i < aLi.length; i++) {
//每个li都需要一个单独的定时器，避免冲突
aLi[i].timer = null;
//设置每一个li初始的透明度为50，避免冲突
aLi[i].alpha = 50;
//绑定事件
aLi[i].onmouseenter = function() {
//调用自定义函数，并传参(需要达到的透明度为100)
squartLi(this, 100);
}
//绑定事件
aLi[i].onmouseleave = function() {
//调用同一个自定义函数，传参(离开时透明度为50)
squartLi(this, 50);
}
} //自定义函数，自定义参数obj和onAlpha
function squartLi(obj, onAlpha) {
//一个li同一时间只需要一个定时器，所以事件触发时，要清除已经触发的定时器
clearInterval(obj.timer);
//定时器
obj.timer = setInterval(function() {
//鼠标进入obj.alpha为50，onAlpha为100，所以+10
if (obj.alpha < onAlpha) {
obj.alpha += 10;
} else {
//离开时，obj.alpha为100，onAlpha为50，所以-10
obj.alpha -= 10;
}
if (obj.alpha == onAlpha) {
//当为50或者100则达到要求，清除定时器
clearInterval(obj.timer);
} else {
//老版本ie
obj.style.filter = 'alpha(opacity: ' + obj.alpha + ');'
//其他浏览器
obj.style.opacity = obj.alpha / 100;
} }, 30);
} }
</script>