jquery实现公告翻滚效果
更新时间：2015年02月27日 08:58:53 投稿：hebedich
本文给大家分享的是一则使用jQuery实现公告的翻滚效果的代码，十分简洁实用，兼容性也非常不错，这里推荐给小伙伴们
翻滚效果非常不错，代码也很简单，这里就不多废话了。
复制代码 代码如下:
//样式文件：
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.scrollNews {
width: 100%;
height: 20px;
overflow: hidden;
background: #FFFFFF;
border: 0px solid #AAAAAA;
}
.scrollNews ul {
padding: 2px 5px 5px 25px;
}
.scrollNews ul li {
height: 20px;
list-style-type: none;
font-size: small;
}
a {
text-decoration: none;
}
</style>
头部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正文区
复制代码 代码如下:
<div class="scrollNews">
<img width="20" height="15" src="img/laba.png" align="left">
<ul>
<li><a class="tooltip" title="查询模块菜单名称更新公告：从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.">
查询模块菜单名称更新公告：从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.</a>
</li>
<li><a class="tooltip" title="查询模块菜单名称更新公告：从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.">
查询模块菜单名称更新公告：从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.</a>
</li>
</ul>
</div>
小伙伴们自由发挥下，应用到自己的项目中吧
相关文章
jQuery插件jquery-barcode实现条码打印的方法
这篇文章主要介绍了jQuery插件jquery-barcode实现条码打印的方法,结合实例形式较为详细的分析了jQuery插件jquery-barcode的功能及打印条码的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
jQuery修改li下的样式以及li下的img的src的值的方法
这篇文章主要为大家介绍了jQuery如何修改li下的样式，以及修改li下的img的src的值，示例代码很简单，一看就会2014-11-11
本文主要介绍了jquery实现下拉框的禁用与启用的具体代码。代码清晰，容易理解。有需要的朋友可以参考下，希望会对大家有所帮助2016-12-12
这篇文章主要介绍了使用jquery实现的鼠标放上去显示悬浮层即弹出定位的div层,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了jQuery zTree如何改变指定节点文本样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
这篇文章主要介绍了jQuery表格排序组件-tablesorter的使用,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了JQuery操作元素的css样式的相关资料,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jQuery设置Cookie及删除Cookie的方法,结合完整实例形式分析了jQuery操作cookie的设置,获取及删除等操作技巧,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了jQuery+Ajax实现无刷新操作，分享了采用Ashx+jQuery Ajax实现“无刷新登录”的例子，感兴趣的小伙伴们可以参考一下2016-01-01
Jquery下EasyUI组件中的DataGrid结果集清空方法
要求选择“地区”及“代维公司”后，刷新第一个DataGrid框体，下面为大家介绍下如何清空Jquery下EasyUI组件中的DataGrid结果集2014-01-01
最新评论