分享到动画弹出框

来源：互联网发布：od软件下载编辑：程序博客网时间：2024/05/04 18:51

以下是简单的一个小动画；
效果如下：
这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #div1 {            width: 100px;            height: 200px;            background: #ddd;            position: absolute;            left: -100px;            top: 0;        }        #div1 span {            width: 20px;            height: 60px;            line-height: 20px;            text-align: center;            left: 100px;            position: absolute;            top: 70px;            background: yellow;        }    </style></head><body><div id="div1">    <span>分享到</span></div><script src="js/jquery-1.11.0.min.js"></script><script>    window.onload = function () {        var oDiv = document.getElementById("div1");        oDiv.onmouseover = function () {            startMove( 0)        };        oDiv.onmouseout = function () {            startMove( -100)        }    }    var timer;    function startMove( tar) {        var oDiv = document.getElementById("div1");        clearInterval(timer);        timer = setInterval(function () {            var v = oDiv.offsetLeft<tar?10:-10;            var t = tar;            if (oDiv.offsetLeft == tar) {                clearInterval(timer)            } else {                oDiv.style.left = oDiv.offsetLeft + v + "px";            }        }, 30)    }</script></body></html>

这里也解决了以前动画的一些问题；
弹窗大片空白，很难看，所以加了一些内容；

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin:0;            padding:0;            box-sizing:border-box;        }        #div1 {            width: 100px;            height: 200px;            background: #ddd;            position: absolute;            left: -100px;            top: 0;        }        #div1 span {            width: 20px;            height: 60px;            line-height: 20px;            text-align: center;            left: 100px;            position: absolute;            top: 70px;            background: yellow;        }        ul{            width:100%;            list-style:none;            display:flex;            flex-direction:column;        }        ul>li{            width:100%;            height:20px;            line-height:20px;            border:1px solid #aaa;            background:purple;            text-align: center;        }        ul li a{            color:#fff;        }    </style></head><body><div id="div1">    <ul>        <li><a href="">分享1</a></li>        <li><a href="">分享2</a></li>        <li><a href="">分享3</a></li>        <li><a href="">分享4</a></li>        <li><a href="">分享5</a></li>        <li><a href="">分享6</a></li>        <li><a href="">分享7</a></li>        <li><a href="">分享8</a></li>        <li><a href="">分享9</a></li>        <li><a href="">分享10</a></li>    </ul>    <span>分享到</span></div><script src="js/jquery-1.11.0.min.js"></script><script>    window.onload = function () {        var oDiv = document.getElementById("div1");        oDiv.onmouseover = function () {            startMove( 0)        };        oDiv.onmouseout = function () {            startMove( -100)        }    }    var timer;    function startMove( tar) {        var oDiv = document.getElementById("div1");        clearInterval(timer);        timer = setInterval(function () {            var v = oDiv.offsetLeft<tar?10:-10;            var t = tar;            if (oDiv.offsetLeft == tar) {                clearInterval(timer)            } else {                oDiv.style.left = oDiv.offsetLeft + v + "px";            }        }, 30)    }</script></body></html>

测试了chrome/opera/safari/firfox/ie9+;可以使用；
这里写图片描述

阅读全文

0 0