$(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. spring security LDAP获取用户信息

    很多企业内部使用LDAP保存用户信息,这章我们来看一下如何从LDAP中获取Spring Security所需的用户信息. 首先在pom.xml中添加ldap所需的依赖. <dependency& ...

  2. Linux服务器中木马(肉鸡)手工清除方法

    由于自己也碰到过这种情况,刚好看到这篇文章,先转载过来.的确蛮有用的哦. 首先剧透一下后门木马如下: (当然这是事后平静下来后慢慢搜出来的,那个时候喝着咖啡感觉像个自由人) 木马名称 Linux.Ba ...

  3. xml、文件操作功能类

    我一个项目中用到的,里面的方法不是太通用,但是可以从里面找到一些有用的代码,以后慢慢添补更新: FileUtil.xml package com.novel.util; import java.io. ...

  4. BizTalk开发系列(三) 单机环境下的BizTalk Server 2006 R2安装

    大部分的开发环境都是在单机环境下进行的,今天整理了一下BizTalk Server 2006 R2在单机环境下的安装步骤. 1. 软件需求 在独立服务器中完整安装BizTalk Server 2006 ...

  5. IOS第四天(2:字典转模型plist)

    HMQuestion.h #import <Foundation/Foundation.h> @interface HMQuestion : NSObject @property (non ...

  6. springmvc Failed to load resource: the server responded with a status of 404 (Not Found)

    jsp页面导入css.js提示上述问题. Spring对静态资源的请求做专门处理 <!-- 对静态资源的请求 --><mvc:resources location="/js ...

  7. Session 知识点再整理(一)基本概念和原理

    Session 的概念 Session 和 Cookie 一样,也是针对 HTTP 的局限性而提出的一种保持客户端和服务器端会话连接状态的机制. Session 被称为会话,指用户在进入网站到浏览器关 ...

  8. C#整数三种强制类型转换int、Convert.ToInt32()、int.Parse()的区别

    1.int适合简单数据类型之间的转换,C#的默认整型是int32(不支持bool型); 2.int.Parse(string sParameter)是个构造函数,参数类型只支持string类型; 3. ...

  9. Thinking in Java——笔记(4)

    Controlling Execution true and false Java doesn't allow you to use a number as a boolean. If you wan ...

  10. maven项目导入,包名出现异常-多出一个java的前缀

    maven工程导入项目的时候,整个结构出现混乱,如下图所示,包名前面莫名其妙的出现了java的前缀: 原因是导入错误,重新导入即可.