点滴积累【JS】---JS小功能(JS实现隐藏显示侧边栏,也就是分享栏的隐藏显示)

效果:

点滴积累【JS】---JS小功能(JS实现隐藏显示侧边栏,也就是分享栏的隐藏显示)

思路:

首先,利用计时器setInterval实现DIV的隐藏显示功能,然后在进行一个判断,之后在把要移动的相应距离进行一个参数传递,再根据参数判断出移动的方向也就是offsetLeft移动的方向,是正或者是负。最后利用onmouseover和onmouseout,实现DIV的事件。

代码:

 1 <head runat="server">

 2     <title></title>

 3     <style type="text/css">

 4         div

 5         {

 6             width: 200px;

 7             height: 300px;

 8             background: #FF0000;

 9             position: absolute;

10             left: -200px;

11         }

12         div span

13         {

14             width: 30px;

15             height: 90px;

16             background: #00FF00;

17             position: absolute;

18             right: -30px;

19             top: 100px;

20             text-align: center;

21         }

22     </style>

23     <script type="text/javascript">

24         window.onload = function () {

25             var oDiv1 = document.getElementById('div1');

26             oDiv1.onmouseover = function () {

27                 shareMove(0);

28             }

29             oDiv1.onmouseout = function () {

30                 shareMove(-200);

31             }

32         };

33         var timer = null;

34         function shareMove(end) {

35             var oDiv1 = document.getElementById('div1');

36             var speed = 0;

37             if (oDiv1.offsetLeft < end) {       //根据DIV的offsetLeft距离判断DIV所要走的正负方向

38                 speed = 10;

39             }

40             else {

41                 speed = -10;

42             }

43             clearInterval(timer);           //在一个setInterval开始之前都要先清除之前的setInterval

44             timer = setInterval(function () {

45                 if (oDiv1.offsetLeft == end) {      //根据参数判断DIV要走的距离

46                     clearInterval(timer);

47                 }

48                 else {

49                     oDiv1.style.left = oDiv1.offsetLeft + speed + 'px'      //DIV要走的距离

50                 }

51             }, 30);

52         }

53     </script>

54 </head>

55 <body>

56     <div id="div1">

57         <span>青苹果分享</span>

58     </div>

59 </body>

 

你可能感兴趣的:(js)