相思资源网 Design By www.200059.com

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

复制代码 代码如下:
//样式文件:
        <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="/UploadFiles/2021-04-02/laba.png">         <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,公告,翻滚

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“jquery实现公告翻滚效果”

暂无jquery实现公告翻滚效果的评论...