jquery实现公告翻滚效果


Posted in Javascript onFebruary 27, 2015

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

//样式文件:

        <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>

小伙伴们自由发挥下,应用到自己的项目中吧

Javascript 相关文章推荐
JS操作数据库的实例代码
Oct 17 Javascript
JSON取值前判断
Dec 23 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
js闭包学习心得总结
Apr 17 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
js实现简单的秒表
Jan 16 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 #Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 #Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 #Javascript
js使用post 方式打开新窗口
Feb 26 #Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 #Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 #Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 #Javascript
You might like
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
php自动加载代码实例详解
2021/02/26 PHP
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
python操作CouchDB的方法
2014/10/08 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Pytorch中.new()的作用详解
2020/02/18 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
中文专业毕业生自荐书范文
2014/01/04 职场文书
高校教师岗位职责
2014/03/18 职场文书
团代会主持词
2014/04/02 职场文书
中队活动总结
2014/08/27 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
git中cherry-pick命令的使用教程
2022/06/25 Servers
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL