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 相关文章推荐
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
JS实现动态无缝轮播
Jan 11 Javascript
Nuxt的路由动画效果案例
Nov 06 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批量生成缩略图的代码
2008/07/19 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
五步轻松实现zTree的使用
2017/11/01 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
python的Template使用指南
2014/09/11 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Python如何安装第三方模块
2020/05/28 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
创立科技Java面试题
2015/11/29 面试题
护士感人事迹
2014/05/01 职场文书
小班评语大全
2014/05/04 职场文书
电钳工人个人求职信
2014/05/10 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
欢迎新生标语
2014/10/06 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS