当前位置:Gxlcms > JavaScript > jquery实现公告翻滚效果_jquery

jquery实现公告翻滚效果_jquery

时间:2021-07-01 10:21:17 帮助过:6人阅读

翻滚效果非常不错,代码也很简单,这里就不多废话了。

代码如下:

//样式文件:

头部js

别忘了导入jquery库

代码如下:

$(function () {
var settime;
$(".scrollNews").hover(function () {
clearInterval(settime);
}, function () {
settime = setInterval(function () {
var $first = $(".scrollNews ul:first"); //选取div下的第一个ul 而不是li;
var height = $first.find("li:first").height(); //获取第一个li的高度,为ul向上移动做准备;
$first.animate({ "marginTop": -height + "px" }, 600, function () {
$first.css({ marginTop: 0 }).find("li:first").appendTo($first); //设置上边距为零,为了下一次移动做准备
});
}, 3000);
}).trigger("mouseleave"); //trigger()方法的作用是触发被选元素的制定事件类型
});

jsp正文区

代码如下:


  


  •   查询模块菜单名称更新公告:从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.


  •   查询模块菜单名称更新公告:从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.



小伙伴们自由发挥下,应用到自己的项目中吧

人气教程排行