jquery实现上线翻滚效果公告

//样式文件：        <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>

转载于:https://www.cnblogs.com/azhqiang/p/4287696.html

jquery实现上线翻滚效果公告相关推荐

html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码
很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: jQuery文字横向滚动jQuery制作 ...
使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
php生成文字闪烁,如何用jquery实现闪烁文字效果
用jquery实现闪烁文字效果的方法:首先获取到最新一条记事的pid,并在添加成功后来闪动这条记事:然后闪动的方法可以写到函数里,直接调用:最后有闪动就要有定时器,开启定时器即可. 本教程操作环境:w ...
html用jq设置动态效果,jQuery实现基本动画效果的方法详解
本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画语法: $(selector).animate({params},spee ...
推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
jquery工具箱旋转动画效果
jquery工具箱旋转动画效果今天给大家分享一个工具箱的旋转动画效果,因为做GIS项目的时候所需要到,这是我在懒人之家看到的一个jquery鼠标点击按钮图标旋转弹出图标菜单旋转动画. 首先,可以引用 ...
jquery实现章节目录效果
<html><head><title>jquery实现章节目录效果</title> <script type="text/javascr ...
jQuery背景墙聚光灯效果
jQuery背景墙聚光灯效果 dreamweaver免费视频教程: 51RGB Dreamweaver板块加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频绝对干货! ...
使用jQuery实现时钟的效果
使用jQuery实现时钟的效果要用jQuery实现时钟的效果首先要给它布局. 用一个div来装所要写的内容,再给这个div一个类为box,再给这个box设置样式让他居中设置它的边框并且设置它的bor ...

jquery实现上线翻滚效果公告

jquery实现上线翻滚效果公告相关推荐

最新文章

热门文章