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 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
深入探讨前端框架react
Dec 09 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
VUE路由动态加载实例代码讲解
Aug 26 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
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
详解原生js实现offset方法
2017/06/15 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
Python中for循环控制语句用法实例
2015/06/02 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
清洁工岗位职责
2014/01/29 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python