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>& ...
随机推荐
- td内容过长,省略号表示
.word{ min-width:100px; max-width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis ...
- DEDECMS里面DEDE函数解析
下面来解说下DEDECMS织梦CMS模板里面的函数说明 在文件include/inc_function.php里面 GetCurUrl() 获贴切前的脚本的URL GetAlabNum($str) 把 ...
- php目录下的ext目录中,执行的命令
php的目录下的ext目录,如果你只需要一个基本的扩展框架的话,执行下面的命令: ./ext_skel --extname=module_name module_name是你自己可以选择的扩展模块的名 ...
- 关于java多线程
package testSynchronized; /** * * 当使用this也就是该文件中的testclass对象作为对象锁时, * 两个线程都使用该对象锁访问该对象的同步代码块, * 是顺序执 ...
- 中介者模式(Mediator)
GOF:用一个中介对象来封装一系列的对象交互.中介者使对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 类图:
- 数据结构--树(遍历,红黑,B树)
平时接触树还比较少,写一篇博文来积累一下树的相关知识. 很早之前在数据结构里面学的树的遍历. 前序遍历:根节点->左子树->右子树 中序遍历:左子树->根节点->右子树 后序遍 ...
- Android课程---单选框与复选框的实现
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="ht ...
- HDU 5919 Sequence II(主席树+逆序思想)
Sequence II Time Limit: 9000/4500 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) To ...
- angularJs表单校验(超级详细!!!)
html代码 <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> < ...
- Objective-C 在Categroy中创建属性(Property)
Objective-c中category是不能直接创建属性的,这时候我们要用到Objc的runtime来实现 用到的方法有两个 一个是get方法 一个set方法 //get方法objc_getAsso ...