简单的JS运动封装实例---侧栏分享到

浏览数：16 / 时间：2015年06月09日 
 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运动封装实例---侧栏分享到,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class 代码 java style html int class 代码 java style html int

相关文章

随机文章

您可能还喜欢

您可能还喜欢