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 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
Node.js爬虫如何获取天气和每日问候详解
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入门的学习方法
2007/01/02 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
javascript整除实现代码
2010/11/23 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python版DDOS攻击脚本
2019/06/12 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
30岁生日感言
2014/01/25 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
泰山导游词
2015/02/02 职场文书
2015年酒店工作总结
2015/04/28 职场文书
装修公司管理制度
2015/08/05 职场文书