有点懵逼我,不加random我的透明度变化也正常

来源:4-4 任意属性值(二)

浪里白嫖张顺

2017-07-12 16:05

<!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=utf-8" />

<title>无标题文档</title>

<style>

*{margin:0;padding:0;

}

ul,li{

list-style:none;

}

ul li{

width:200px;

height:100px;

background:yellow;

margin-bottom:20px;

    border:4px solid black;

filter:alpha(opacity:30);

opacity:0.3;

}

</style>

<script>

window.onload=function(){

  var onli1=document.getElementById('li1');

   onli1.onmouseover=function(){

 startmove(this,100,'opacity');

 }

   onli1.onmouseout=function(){

 startmove(this,30,'opacity');

 }


/*var onLi=document.getElementsByTagName('li');

   for(var i=0;i<onLi.length;i++){

  onLi[i].timer=null;

  onLi[i].onmouseover=function(){

  startmove(this,400);

  }

  onLi[i].onmouseout=function(){

  startmove(this,200);

  }

  }*/

}

alert(0.07*100)

function startmove(obj,iTarget,attr){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var irc=0;

if(attr=='opacity'){

icr=parseFloat(getStyle(obj,attr))*100;

}else{

icr=parseInt(getStyle(obj,attr));}

var speed=(iTarget-icr)/20;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(icr==iTarget){

clearInterval(obj.timer);

}else{

if(attr=='opacity'){

obj.style.filter='alpha(opacity:'+(icr+speed)+')';

obj.style.opacity=(icr+speed)/100;

}else{

obj.style[attr]=icr+speed+'px'; }

}

},30)

}

function getStyle(obj,attr)

{

if(obj.currentStyle){

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr];

}

}

</script>

</head>

<body>

<ul>

<li id='li1'></li>

</ul>

</body>

</html>

能帮我看下吗

写回答 关注

1回答

  • 浪里白嫖张顺
    2017-07-12 16:05:52

    写错了,应该是round。。

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113920 学习 · 1494 问题

查看课程

相似问题