Javascript物体运动（单物体运动）

来源：互联网发布：农村淘宝在哪里编辑：程序博客网时间：2024/04/29 03:42
 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);    }}//获取idfunction 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>
阅读全文
0 0