jquery 新闻滚动效果
$(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 新闻滚动效果的更多相关文章
- 使用JavaScript实现新闻滚动效果
最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了 ...
- 16个最棒的jQuery视差滚动效果教程
今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...
- jQuery实现滚动效果详解1
声明:第一次写原创,本人初学,很多地方一知半解,本篇算是一个学习的笔记,欢迎批评指正,转载请注明. 今天要做的效果是在网上经常能看到多幅图片向左无缝滚动,鼠标滑过动画暂停,鼠标滑出动画继续的效果.网上 ...
- jquery无缝滚动效果实现
demo如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- JQuery新闻滚动的实现方法(常用笔记1)
.mouseover() //经过子元素也会触发 .mouseenter() //经过被选元素才会触发 .mouseout() //离开子元素也会触发 .mouseleave() //离开被选元素才会 ...
- 分享七款视差滚动效果的jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...
- js实现新闻滚动实例
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- js实现新闻滚动-单行滚动或者多行滚动
注明:都是转载. 先说单行滚动: --------直接复制以下代码即可试验 转载http://www.3lian.com/edu/2011/06-30/4986.html----------- < ...
- 【js与jquery】jquery循环滚动新闻
2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...
随机推荐
- jquery中对动态生成的标签响应click事件(二)…与ajax交互使用
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncodin ...
- MUI - 上拉刷新/下拉加载
新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...
- 已知一个日期和天数, 求多少天后的日期(是那个超时代码的AC版)
#include <stdio.h> #include <string.h> ; int judge_year(int x) { == || x % == && ...
- JAVA面向对象程序设计——实验报告
- 20145337 《Java程序设计》第二周学习总结
20145337 <Java程序设计>第二周学习总结 教材学习内容总结 Java可分基本类型与类类型: 基本类型分整数(short.int.long).字节(byte).浮点数(float ...
- php课程---php使用PDO方法详解(转)
本文详细分析了php使用PDO方法.分享给大家供大家参考.具体分析如下: PDO::exec:返回的是int类型,表示影响结果的条数. 代码如下: PDOStatement::execute 返回的是 ...
- ios-NSMutableAttributedString 更改文本字符串颜色、大小
NSString * string = [NSString stringWithFormat:@"您的号码是%@号",[self backString:dic[@"ran ...
- C#中ref和out的使用与区别
C#中ref关键字和out关键字所实现的功能差不多,都是指定一个形参按照引用传递而不是实参的副本传递.但是二者适用场景还是有些区别的:out适合用在需要retrun多个返回值的地方,而ref则适合用在 ...
- [daily] 宇宙终极shell之zsh
序 很久以前,我就知道zsh.后来在并不遥远的好几年前,第一次装arch的时候,默认shell就是zsh.虽然用起来不太习惯,但是仍然蛮好用的. 决定好好的学一下zsh,如果可以就切换过去,毕竟bas ...
- CodeMirror很好用
基于Javascript的web的文本编辑器 各种强大 支持多种语言的语法高亮, 多种主题 vim ,emacs 快捷键