码迷,mamicode.com
首页 > 其他好文 > 详细

公告信息滚动功能

时间:2017-06-16 11:22:36      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:声明   执行   val   top   var   func   ihe   on()   变量   

直接怼功能代码:

这是第一种从下出现的方法:

var time;//声明定时器变量
clearInterval(time);//初始清除定时器
time = setInterval(function() {//创建定时器
var $ul = $("#gg");//利用jquery获取公告的ul
$ul.animate(3000,function(){//给ul动画,3s
$ul.append($ul.find("li:first"));//将获取到的第一个li添加到ul的最后
$ul.find("li:nth-child(3)").hide();//因为我定义公告为3行,第三行出现要有个隐藏显示的动画,所以先隐藏第3行的li
$ul.find("li:nth-child(3)").fadeIn(1000);//1s内显示第三行的li
});
},3000);//没3s执行一次定时器

这是第二种从上出现的方法:

$(function(){
var scrtime;
$("#quotation").hover(function(){//鼠标放到公告的区域不再滚动
clearInterval(scrtime);//清除定时器

},function(){
scrtime = setInterval(function(){//创建定时器
var $ul = $("#quotation ul");
/*获取到ul下的最后一个li*/
var liHeight = $ul.find("li:last").height();
$ul.animate({marginTop : liHeight + 35 + "px"},1000,function(){
$ul.find("li:last").prependTo($ul)//把获取到的li添加到ul的最前面
$ul.find("li:first").hide();//最后一个li隐藏
$ul.css({marginTop:0});//ul位置不变
$ul.find("li:first").fadeIn(1000);//在1s内把添加到第一个位置的li渐渐显示出来
});
},4000);//每4s执行一次

}).trigger("mouseleave");//触发元素quotation的mouseleave事件
});
 

公告信息滚动功能

标签:声明   执行   val   top   var   func   ihe   on()   变量   

原文地址:http://www.cnblogs.com/thongyan/p/7026392.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!