可以帮忙看下代码吗-慕课网

首页课程实战体系课手记专栏慕课教程

可以帮忙看下代码吗

来源：4-4 任意属性值（二）

poudoudou

2016-10-12 16:15

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

margin: 0;

padding: 0;

}

div {

width: 1000px;

height: 300px;

background: #0e90d2;

filter: alpha(opacity:30);

opacity: 0.3

}

</style>

</head>

<body>

<div>

</div>

window.onload = function () {

var oDiv = document.getElementsByTagName('div')[0],

timer = null;

oDiv.onmouseover = function () {

startMove('opacity',100);

}

oDiv.onmouseout = function () {

startMove('opacity',30);

}

function startMove(attr,iTarget) {

clearInterval(timer);

timer = setInterval(function(){

var oDiv = document.getElementsByTagName('div')[0],

var icur=0;

if(attr=='opacity'){

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

}

else{

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

}

var speed=(iTarget-icur)/8;

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

if(icur==iTarget){

clearInterval(timer);

}

else{

if(attr=='opacity'){

icur+=speed;

oDiv.style.filter='alpha(opacity:'+icur+')';

oDiv.style.opacity=icur/100;

}

else{

oDiv.style[attr]=icur+speed+'px'

}

}, 30)

}

//获取css样式

function getStyle(obj, attr) {

if (obj.currentStyle) {

return obj.currentStyle[attr];

}

else {

return getComputedStyle(obj, null)[attr];

}

</script>

</body>

</html>

如加入obj参数则

oDiv.onmouseover = function () {

startMove(this,'opacity',100);

}

在这里我不用obj的参数可以么直接默认为oDiv 不知道是不是这个原因？

写回答关注

4回答

黑色秋水

2016-10-21 10:50:27

理论上没什么问题，但是不能应用于多物体运动

0 0
poudoudou

2016-10-20 14:12:17

谢谢亲的答复但是在不传入obj的参数的情况下之前已经有定义timer=null，因此之后可以开始就可以clearsetinterval 不知道对不对。。

0 0

黑色秋水: 2016-10-20 11:30:34

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div {
            width: 1000px;
            height: 300px;
           
            background: #0e90d2;
            filter: alpha(opacity:30);
            opacity: 0.3
       
        }

    </style>
</head>
<body>
<div>

</div>
<script type="text/javascript">
    window.onload = function () {
        var oDiv = document.getElementsByTagName('div')[0],
        
        timer = null;

        oDiv.onmouseover = function () {
            startMove(this,'opacity',100);
        }

        oDiv.onmouseout = function () {
            startMove(this,'opacity',30);
        }
    }    
        


        function startMove(obj,attr,iTarget) {

            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var oDiv = document.getElementsByTagName('div')[0];
                var icur=0;
                if(attr=='opacity'){
                icur=Math.round(parseFloat(getStyle(oDiv,attr))*100);
                 }
                else{
                 icur=parseInt(getStyle(oDiv,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'){
                 icur+=speed;
                     oDiv.style.filter='alpha(opacity:'+icur+')';
                     oDiv.style.opacity=icur/100;
                 }
                
                 else{
                 oDiv.style[attr]=icur+speed+'px'
                 }
             }
             }, 30)
         }

    

    //获取css样式
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        }
        else {
            return getComputedStyle(obj, null)[attr];
        }
    }
</script>
</body>
</html>

2 0

poudou... 回复黑色秋水

谢谢亲的答复但是在不传入obj的参数的情况下之前已经有定义timer=null，因此之后可以开始就可以clearsetinterval 不知道对不对。。

2016-10-20 14:12:42

共 2 条回复 >

Supreme930408

2016-10-13 13:15:55

没听明白你说什么

1 0

poudou...

不好意思就是代码不能够运行在 function startMove (attr,iTarget) 中加上obj这个参数也不可以不知道哪里出错了。。。

2016-10-13 14:56:14

共 1 条回复 >

JS动画效果

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

113909 学习 · 1502 问题

查看课程

相似问题

透明度不会变化，别的可以变化,求帮忙看下

回答 2

代码有问题，达不到设置的width和height,帮忙看看好吗

回答 3

麻烦帮忙看下，我写出来的代码没有效果

回答 4

大神帮忙看一下

回答 2

麻烦大家帮忙看看代码的错误！谢谢了

回答 1

打开慕课网App查看更多内容