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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
Element Collapse 折叠面板的使用方法
Jul 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函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
vue实例的选项总结
2020/06/09 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python中apply函数的用法实例教程
2014/07/31 Python
python内存管理分析
2015/04/08 Python
Python中的localtime()方法使用详解
2015/05/22 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
理解python中生成器用法
2017/12/20 Python
python破解zip加密文件的方法
2018/05/31 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
Shell编程面试题
2016/05/29 面试题
工作失职检讨书500字
2014/10/17 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python