$(function () {
     var scrollTimer = null;
     var delay = 2000;
     //1.鼠标对新闻触发mouseout事件后每2s调用scrollNews()
     //2.鼠标对新闻触发mouseover事件后停止调用scrollNews()
     //3.初次加载页面触发鼠标对新闻的mouseout事件
     $('div.busMsg').hover(function () {
     clearInterval(scrollTimer);
     }, function () {
     scrollTimer = setInterval(function () {
     scrollNews();
     }, delay);
     }).triggerHandler('mouseout');
     });
     //滚动新闻
     function scrollNews() {
     var $news = $('div.busMsg>ul');
     var $lineHeight = $news.find('li:first').height();
     $news.animate({ 'marginTop': -$lineHeight + 'px' }, 600, function () {
     $news.css({ margin: 0 }).find('li:first').appendTo($news);
     });
     }

<div id="busMsg" class="busMsg">
            <ul class="busMsgs">
              <li>
                
              </li>

</ul>
   </div>

jquery 新闻滚动效果的更多相关文章

  1. 使用JavaScript实现新闻滚动效果

    最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了 ...

  2. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  3. jQuery实现滚动效果详解1

    声明:第一次写原创,本人初学,很多地方一知半解,本篇算是一个学习的笔记,欢迎批评指正,转载请注明. 今天要做的效果是在网上经常能看到多幅图片向左无缝滚动,鼠标滑过动画暂停,鼠标滑出动画继续的效果.网上 ...

  4. jquery无缝滚动效果实现

    demo如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. JQuery新闻滚动的实现方法(常用笔记1)

    .mouseover() //经过子元素也会触发 .mouseenter() //经过被选元素才会触发 .mouseout() //离开子元素也会触发 .mouseleave() //离开被选元素才会 ...

  6. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

  7. js实现新闻滚动实例

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. js实现新闻滚动-单行滚动或者多行滚动

    注明:都是转载. 先说单行滚动: --------直接复制以下代码即可试验 转载http://www.3lian.com/edu/2011/06-30/4986.html----------- < ...

  9. 【js与jquery】jquery循环滚动新闻

    2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...

随机推荐

  1. SQL server 子查询、设置主键外键、变量及变量查询

    一.子查询 子查询,又叫做嵌套查询. 将一个查询语句做为一个结果集供其他SQL语句使用,就像使用普通的表一样,被当作结果集的查询语句被称为子查询. 子查询有两种类型: 一种是只返回一个单值的子查询,这 ...

  2. C# 文件和文件夹操作

    一.文件操作 1.File类的常用静态方法: void AppendAllText(string path, string contents),将文本contents附加到文件path中 bool E ...

  3. php extension memcache and memcached module on centos6

    环境 centos6 php5.6 nginx 1.8 防火墙均关闭 我在这里简单描述一下过程 #install nginxyum -y install pcre pcre-devel openssl ...

  4. BizTalk动手实验(一)安装BizTalk Server 2010开发环境

    1 课程简介 通过本课程了解BizTalk 2010的软依赖及基本的安装配置步骤,BizTalk相应的解决方案及高可用性方案可在课程的基础进行深入学习. 2 准备工作 硬件环境:CPU >2.0 ...

  5. 【转】oracle回闪操作

    在9i上执行的操作 查询test表中记录select * from test;删除test表中记录delete from test;获得过去的会话exec dbms_flashback.disable ...

  6. Flink - Checkpoint

    Flink在流上最大的特点,就是引入全局snapshot,   CheckpointCoordinator 做snapshot的核心组件为, CheckpointCoordinator /** * T ...

  7. jfinal路由简单解析

    在jfinal中,通过JFinalFilter对所有的类进行过滤. 以下是路由的调用关系(我在调用关系旁边做了标记,会贴出具体的代码和解释): -1- Config: Routes -2- Inter ...

  8. 修改FreeBSD启动菜单停留时间

    原文:http://blog.chinaunix.net/uid-21782158-id-11006.html 分类: 两种情况: 一.启动时出现菜单的时候要停的10秒 方法: 编辑/boot/loa ...

  9. 关于ios8模拟器不能输入中文问题以及软键盘不弹出问题

    在Xcode菜单栏中   Product->scheme->Edit Scheme->Options->Application Region改为中国,就可以输入中文了, 如果软 ...

  10. AD6电气规则错误报告中英文对照

    Ⅰ:Error Reporting 错误报告 A:Violations Associated with Buses 有关总线电气错误的各类型(共 12 项) ◆ bus indices out of  ...