jquery实现公告翻滚效果
翻滚效果非常不错,代码也很简单,这里就不多废话了。
//样式文件: <styletype="text/css"> *{ margin:0; padding:0; } .scrollNews{ width:100%; height:20px; overflow:hidden; background:#FFFFFF; border:0pxsolid#AAAAAA; } .scrollNewsul{ padding:2px5px5px25px; } .scrollNewsulli{ height:20px; list-style-type:none; font-size:small; } a{ text-decoration:none; } </style>
头部js
别忘了导入jquery库
$(function(){ varsettime; $(".scrollNews").hover(function(){ clearInterval(settime); },function(){ settime=setInterval(function(){ var$first=$(".scrollNewsul:first"); //选取div下的第一个ul而不是li; varheight=$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正文区
<divclass="scrollNews"> <imgwidth="20"height="15"src="img/laba.png"align="left"> <ul> <li><aclass="tooltip"title="查询模块菜单名称更新公告:从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】."> 查询模块菜单名称更新公告:从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.</a> </li> <li><aclass="tooltip"title="查询模块菜单名称更新公告:从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】."> 查询模块菜单名称更新公告:从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.</a> </li> </ul> </div>
小伙伴们自由发挥下,应用到自己的项目中吧