不废话！先看最终效果http://www.yewu233.com/workspace/shareBar.html
努力过自己想要的生活
JS的动画，最要是用一个方法——计时器 setInterval(); 先来说说这个方法。
setInterval(参数1,参数2); 需要两个参数，第一个参数可以是一个方法，也可以直接写一堆代码在里面。参数2是常量，表示毫秒。这个方法将会每隔 参数2 个毫秒执行一次 参数1 的代码。
聪明的小伙伴就要问了，这不是一直停不下来了嘛，别急别急，还有停止的方法。
我们可以 var 一个 timer=setInterval(参数1,参数2); 想要让它停下来的时候只需要
clearInterval(timer); 这样定时器就被清除了。
OK，我们来思考这个左侧分享栏。
1.我们的HTML结构里需要一个长方形栏目，右边凸出来两个字“分享” 然后长方形都在浏览器左侧外面。于是我写了一个div，里面是一个span标签写“分享”。对div和span都position:absolute;绝对定位 然后设置div的left等于div的宽度的负数，span的left等于span的宽度就好，然后给一个top让span标签在div的中间位置。这样HTML结构搞定！
2.当鼠标移上“分享”的时候，将div分享栏拉出。
(1)给span“分享”添加鼠标移上事件onmouseover
(2)要使div分享栏出来，只需要改变css中div的left值就好
(3)每隔一点点时间让div分享栏出来一点点，一直到全部出来，就变成了拉出的一段动画。
(4)所以我们在onmouseover后设置一个定时器，每隔30毫秒让div的
style.left = offsetLeft +10 + 'px'; 就搞定了。
(5)这时候我们还要想到一个问题，假如我在移出的过程中多次移上“分享”，是不是就会添加很多个定时器，所以这时候我们要在onmouseover中先添加一个判断，将timer设为此定时器，初始值设为null 在进入onmouseover绑定的方法时，先判断timer是不是null 如果是的话就设置定时器，如果不是null就先清除这个定时器再重新定义定时器。
(6)拉出之后还要退回，退回是在鼠标离开分享栏或“分享”的时候退回的。给div和“分享”span都绑定onmouseout事件。
(7)退回的跟拉出相反就行，就是每隔30毫秒让div的
style.left = offsetLeft - 10 + 'px'; 即可。
(8)当然退回的时候也要进行timer是否是null的判断。
OK，上代码，以后的文章中大段代码我都会直接传图片，希望大家不要直接copy代码，自己仿照做一做，思考思考。
自己先按照这个思路写写看，有问题看一下下面的代码参考一下，或者先看看下面的代码，理解了之后自己再重写看看
HTML结构如下：###
HTML结构-掏粪
CSS：###
CSS-掏粪
JS实现代码
JS代码-掏粪
我叫掏粪，正在努力的学JavaScript和jQuery
这些文章算是自己的一些记录，更多的是想分享给同样在路上的前端学者，共勉。
新浪微博ID：我叫掏粪i
个人博客：yewu233.com
很乐意萌萌哒妹子来撩我~
最后说一句：这些都是自己在慕课网看完实例之后根据自己的理解做的，如果感觉对自己没有帮助，请不要喷，看文的不是同一个水平，对少数人有帮助就好了。
网友评论