Javascript物体运动(单物体运动)
Javascript物体运动(单物体运动)
carolcoral 发表于3个月前
Javascript物体运动(单物体运动)
  • 发表于 3个月前
  • 阅读 1
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: Javascript物体运动(单物体运动)

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>

 

 

共有 人打赏支持
粉丝 0
博文 11
码字总数 6173
×
carolcoral
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: