网站消息推送

第一次写自己的博客，还是挺紧张的。话不多说，直接进入正文！

本文介绍使用jq库写的简单消息推送，源代码来自于www.helloweba.com">www.helloweba.com，经过自己的理解加修改，现在自己也能写出来，所以说是原创也未必不可吧。

先码上代码：

这是html部分，即使小白应该也很容易看懂的，再次不多说。接下来才是本文的重点，即如何调用jq从而实现消息推送。

代码很少，但对于小白来说可能还不大懂，比如为什么这么写，他的逻辑是什么，这也是我要讲解的东西。

$(function() {}这是JQuery的语法，$表示JQuery对象，可以有好几种用法。比如传递选择器字符串、页面对象等，比如$("#con")，是传递页面对象id为con的对象，本文是一个div对象，但如果直接传函数体进去，表示当页面加载完毕时执行这个函数。

至于hover（），大家都知道在html中是表示当鼠标位于所选元素上分时才会出现的样式，而在jq中，他有类似的含义，具体如下：

$("#id").hover(
function(){
   当鼠标放上去的时候,程序处理
},


function(){
   当鼠标离开的时候,程序处理
});；

clearInterval() 方法则可取消由 setInterval() 设置的 timeout。clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。具体可以看w3c中HTML DOM Window 对象，这是网址HTML DOM clearInterval() 方法 http://www.w3school.com.cn/jsref/met_win_clearinterval.asp。

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。详情可点击这：HTML DOM setInterval() 方法 http://www.w3school.com.cn/jsref/met_win_setinterval.asp。

prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容。  

animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

这段代码的思路是在页面加载时，可自动推送消息，因而需要把$(function() {}放最外面，接下来就是具体代码实现，怎么做到自动消息推送，主要靠的是animate的动画效果，先用li:last选择器获取最后一个li的高度，这样在调用animate时，可根据他的高度设定空白区域大小（用来装滚动信息的区域），然后用prependTo() 方法在ul前插入最后一条li。利用setInterval() 方法的定时调用就实现了信息循环的效果，但是这里有个小问题，你会发现信息滚动后会与框架有很大的空白，而这空白恰好是我们每次调用setInterval() 方法生成的，如何达到推送时无空白呢，关键是一个样式问题，ul.css({marginTop:0})；这样每次调用setInterval() 方法后也调用了animate（），实现无空白间隔推送。

本文不足之处可能很多，希望各位看官留下宝贵意见！也可以qq邮箱交流，本人qq邮箱：1106450575@qq.com