zoukankan      html  css  js  c++  java
  • 运动——移入弹出侧边栏分享

    代码:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    #div {
    200px;
    height: 500px;
    background: chartreuse;
    position: absolute;
    left: -200px;
    top: 0px;
    }

    #div span {
    20px;
    height: 70px;
    background: fuchsia;
    position: absolute;
    right: -20px;
    top: 100px;

    }

    </style>
    <script>
    window.onload = function () {
    var oDiv = document.getElementById("div");
    var iTarget = null;
    oDiv.onmouseover = function () {
    startMove( 0);

    };
    oDiv.onmouseout = function () {
    startMove(-200);

    }


    var timer = null;

    function startMove( iTarget) {

    clearInterval(timer);
    timer = setInterval(function () {
    var speed=0;
    if(oDiv.offsetLeft>iTarget){
    speed=-10;
    }else{
    speed=10;
    }
    if (oDiv.offsetLeft == iTarget) {
    clearInterval(timer);
    } else {
    oDiv.style.left = oDiv.offsetLeft + speed + "px";
    }
    },

    30
    )

    }


    }

    </script>
    </head>
    <body>
    <div id="div">
    <span>分享到</span>
    </div>


    </body>
    </html>

     

    运行结果:

    初始:

    鼠标移入:

    鼠标移出:

    Me discréditer résister, peut supporter beaucoup de compliments!
  • 相关阅读:
    spring mvc 分页
    get/post时中文乱码问题的解决办法
    mysql-day01
    servler配置
    idea
    springMvc 核心配置
    ServletRequest面试题
    Servlet面试题
    Http面试题
    测试文件
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5264228.html
Copyright © 2011-2022 走看看