又是一次做业练习,jquery消息滚动,效果图以下:html
源码下载及效果预览:https://www.jq22.com/jquery-info22971jquery
代码实现起来很简单,因此看起来效果也是很不如人意,就当记录一会儿趴ide
推荐连接 函数
无缝滚动:http://www.jq22.com/jquery-info22981动画
推送滚动:http://www.jq22.com/jquery-info22468spa
如今来简单写一下本身的这个代码实现code
js代码:htm
$(function(){ //滚动事件,每两秒滚动一次 var mun =setInterval(function(){ $("li:last").hide("slow").prependTo($("#file0")).slideDown(); },2000); //鼠标悬停事件,悬停中止滚动,鼠标移出开始滚动 $("li").hover(function(){ clearInterval(mun); },function(){ mun = setInterval(function(){ $("li:last").hide("slow").prependTo($("#file0")).slideDown(); },2000); } );
过一遍jq的方法和事件blog
定时器:事件
setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
setTimeout() :在指定的毫秒数后调用函数或计算表达式。
定时器是使用js的内容。详情参考 https://www.runoob.com/w3cnote/js-timer.html
hide属性:隐藏显示的元素和它对应的是show属性代码中的slideDown能够替换成show(),都是动画效果而已
prependTo属性:把全部匹配的元素前置到另外一个、指定的元素元素集合中。案例中是每隔一秒把最后一个li添加到ul中,
代码太简洁了不知道写啥了QAQ