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实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
下面小编就为大家带来一篇Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-07jQuery ajax serialize() 方法使用示例
serialize() 方法创建以标准 URL 编码表示的文本字符串,下面为大家介绍下jQuery serialize方法的使用2014-11-11基于jquery的自定义鼠标提示效果 jquery.toolTip
看到其它网站A标签title效果,心里痒痒,就想也用到自己网站上。 正好在学jquery 插件扩展,就参照前辈代码,自己动手写了一个2010-11-11jQuery 1.0.4 - New Wave Javascript(js源文件)
jQuery 1.0.4 - New Wave Javascript(js源文件)...2007-01-01
最新评论