zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    ES6知识点脑图
    三大框架知识点比较(Angular, Vue, React)
    Angular(06)- 为什么数据变化,绑定的视图就会自动更新了?
    Angular(05)- 组件知识点脑图
    iTop4412开发板+虚拟机+tftp服务
    发布项目遇到的问题
    Ubuntu + Django(DRF) + channels(websocket)+NGINX + uwsgi 环境部署
    在Ubuntu中使用uwsgi 启动 Django ,但是静态文件映射出错
    Django + mysql 在创建数据库出错
    流媒体服务器搭建 ffmpeg + nginx
  • 原文地址:https://www.cnblogs.com/azhqiang/p/4287696.html
Copyright © 2011-2022 走看看