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全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
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
实现获取http内容的php函数分享
2014/02/16 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
javascript 全等号运算符使用说明
2010/05/31 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Django-migrate报错问题解决方案
2020/04/21 Python
python 生成器需注意的小问题
2020/09/29 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
中秋节活动总结
2014/08/29 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
初中重阳节活动总结
2015/05/05 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python