速度动画--JS实现分享按钮移入移出

来源：互联网发布：图片归类整理软件编辑：程序博客网时间：2024/06/01 19:02

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>速度动画--JS实现分享按钮移入移出</title>    <style type="text/css">        *{margin: 0; padding: 0;}        #div1{width: 200px; height: 200px; background: #c00; position: relative; left: -200px; top: 0;}        #div1 span{width: 20px; height: 50px; background: green; position: absolute; left: 200px; top: 75px;}    </style>    <script type="text/javascript">        window.onload=function(){            var oDiv=document.getElementById('div1');            oDiv.onmouseover=function(){                startmove(0);            }            oDiv.onmouseout=function(){                startmove(-200);            }        }        var timer=null;        function startmove(target){            window.clearInterval(timer);            var oDiv=document.getElementById('div1');            timer=window.setInterval(function(){                if (oDiv.offsetLeft<target) {                    speed=10;                }else if (oDiv.offsetLeft>target) {                    speed=-10;                }                if (oDiv.offsetLeft==target) {                    window.clearInterval(timer);                }else{                    oDiv.style.left=oDiv.offsetLeft+speed+'px';                }            },30);        }    </script></head><body>    <div id="div1"><span>分享</span></div></body></html>

阅读全文

0 0