为了账号安全,请及时绑定邮箱和手机立即绑定

这一节的源代码在哪里?

想看看源代码,怎么没有这一节的源代码?

正在回答

1 回答

```js

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>任意属性值2</title>

<style>

body, ul, li {

margin: 0;

padding: 0;

}

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>

<script>

window.onload = function() {

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

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

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);

}

}

// var timer = null;

function getStyle(obj,attr) {

if(obj.currentStyle) {

// IE

return obj.currentStyle[attr];

}else{

// Firefox

return getComputedStyle(obj,false)[attr];

}

}

var alpha = 30;

function startMove(obj,attr,iTarget){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var icur = 0;

if(attr == 'opacity') {

icur = Math.round(parseFloat(getStyle(obj,attr))*100);

}else{

icur = parseInt(getStyle(obj,attr));

}

var speed = (iTarget-icur)/8;

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

if(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 + 'px';

}

}

},30)

}

</script>

</head>

<body>

<ul>

<li id="li1"></li>

</ul>

</body>

</html>

```

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113925    人
  • 解答问题       1443    个

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

进入课程

这一节的源代码在哪里?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信