<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>多运动透明</title>
<style type="text/css">
ul,li{list-style: none;}
ul li{
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 4px solid #000;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
</head>
<body>
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li></li>
</ul>
<script type="text/javascript">
window.onload =function () {
// var ali =document.getElementsByTagName('li')
// for (var i = 0; i < ali.length; i++) {
// ali[i].timer =null;
// ali[i].timer =null;
// ali[i].onmouseover = function () {
// startMove(this,400);
// }
// ali[i].onmouseout =function () {
// startMove(this,200)
// }
// };
var li1=document.getElementById('li1')
var li2=document.getElementById('li2')
li1.onmouseover =function () {
startMove(this,'opacity',100)
}
li1.onmouseout =function () {
startMove(this,'opacity',30)
}
// li2.onmouseover =function () {
// startMove(this,'width',400)
// }
// li2.onmouseout =function () {
// startMove(this,'width',100)
// }
}
function getSytle (obj,attr) {
if(obj.currentStyle){return obj.currentStyle[attr];}
else{return getComputedStyle(obj,false)[attr];}
}
// var timer=null;
var alpha=30;
function startMove (obj,attr,iTarget) {
clearInterval(obj.timer);
obj.timer =setInterval(function () {
var icur =0;
if (attr=='opacity') {icur=parseFloat(getSytle(obj.attr))*100}
else{var icur=parseInt(getSytle(obj,attr))};
var speed = (iTarget-icur)/8;
speed =speed>0? Math.ceil(speed):Math.floor(speed)
if (obj.icur==iTarget)
{clearInterval(obj.timer)}
else{
if (attr =='opacity')
{
obj.style.filter = 'alpha(opacity:'+(icur+speed+')';
obj.style.opacity=(icur+speed)/100}
else{ obj.style[attr] = icur+speed};
}
},30)
}
</script>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
选择你要帖的代码语言就好了添加回答
举报
0/150
提交
取消