Coral

Javascript物体运动(单物体运动)

//侧边栏分享示例

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <title>运动动画效果</title>

        <style>

        *{margin:0px;padding: 0px;font-size: 14px;clear: both;}

        #div1{

            width: 200px;

            height: 200px;

            background-color: red;

            opacity: 0.3;

            filter:alpha(opacity:30);//设置图层透明度

            left: -200px;

            position: relative;

            top: 0px;

        }

        #share{

            width: 20px;

            height: 50px;

            background-color: blue;

            font-family: '微软雅黑';

            position: absolute;

            left: 200px;

            text-align: center;

            top: 75px;

        }

</style>

<script>

/**

 * 描述物体进行运动的状态

 * @return {startMove(itarget);} 运动函数

 */

window.onload = function(){

    var oDiv = document.getElementById('div1');

    oDiv.onmouseover = function(){

            startMove(0);

    }

    oDiv.onmouseout = function(){

            startMove(-200);

    }

}

//获取id

function getdiv(){

    var oDiv = document.getElementById('div1');

}

var timer = null;

function startMove(itarget,fn){

    var oDiv = document.getElementById('div1');

    // getdiv();

    clearInterval(timer);

    timer = setInterval(function(){

        var speed = 0;

        if(oDiv.offsetLeft > itarget){

            speed = -10;

        }else if(oDiv.offsetLeft < itarget){

            speed = 10;

        }else{

            speed = 0;

        }

        oDiv.style.left = oDiv.offsetLeft + speed +'px';

    }, 30);

}

</script>

</head>

<body>

<div id="div1"><span id='share'>分享</span></div>

</body>

</html>

评论

热度(1)