网站消息推送
2016-04-07 23:11
127 查看
第一次写自己的博客,还是挺紧张的。话不多说,直接进入正文!
本文介绍使用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
本文介绍使用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
相关文章推荐
- 什么是对象存储?OSD架构及原理
- 学习网站
- 解决网站访问过多而导致缓慢的问题
- 架构高性能网站秘笈(三)——浏览器缓存
- 架构高性能网站秘笈(三)——浏览器缓存
- 好的架构不是设计出来的,而是演进出来的
- 第76课:Spark SQL基于网站Log的综合案例实战之Hive数据导入、Spark SQL对数据操作每天晚上20:00YY频道现场授课频道68917580
- 架构高性能网站秘笈(二)——动态内容缓存
- 架构高性能网站秘笈(二)——动态内容缓存
- 做了个工具类的小网站---tool.admaster.club
- 优酷、YouTube、Twitter及JustinTV视频网站架构设计
- 网站建设(4)——服务器的选择和购买
- 企业网站服务器架构演变
- 使用URL Rewrite实现网站伪静态
- jsp统计网站的访问次数
- 《软件架构设计》学习笔记--9--6大步骤5:细化架构设计
- NopCommerce源码架构详解--初识高性能的开源商城系统cms
- 架构高性能网站秘笈(一)——了解衡量网站性能的指标
- 架构高性能网站秘笈(一)——了解衡量网站性能的指标
- 架构师是做什么的呢