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

 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)