源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery实现公告翻滚效果

  • 时间:2020-02-17 07:54 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery实现公告翻滚效果
翻滚效果非常不错,代码也很简单,这里就不多废话了。
[u]复制代码[/u] 代码如下:
//样式文件:         <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库
[u]复制代码[/u] 代码如下:
$(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正文区
[u]复制代码[/u] 代码如下:
<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>
小伙伴们自由发挥下,应用到自己的项目中吧
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部