1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
8 #div2 {width: 30px; height: 60px; background: black; position: absolute; right: -30px; top: 70px; color: white; text-align: center;}
9 </style>
10 <script>
11 window.onload = function() {
12
13 var oDiv1 = document.getElementById(‘div1‘);
14 var oDiv2 = document.getElementById(‘div2‘);
15 var iTimer = null;
16
17 oDiv1.onmouseover = function() {
18 startMove(0, 10);
19 }
20
21 oDiv1.onmouseout = function() {
22 startMove(-100, -10);
23 }
24
25 function startMove(iTarget, iSpeed) {
26 clearInterval(iTimer);
27
28 iTimer = setInterval(function() {
29
30 if (oDiv1.offsetLeft == iTarget) {
31 clearInterval(iTimer);
32 } else {
33 oDiv1.style.left = oDiv1.offsetLeft + iSpeed + ‘px‘;
34 }
35
36 }, 30);
37 }
38
39 }
40 </script>
41 </head>
42
43 <body>
44 <div id="div1">
45 <div id="div2">分享到</div>
46 </div>
47 </body>
48 </html>
简单的JS运动封装实例---侧栏分享到
时间： 2024-08-02 02:42:55