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>& ...
随机推荐
- POJ 1016 模拟字符串
Numbers That Count Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 20396 Accepted: 68 ...
- unity3d插件Daikon Forge GUI 中文教程5-高级控件listbox和progress bar的使用
3.3.listbox列表框 Atlas 图集: 下面应用到的精灵都是在这里的. ListBox中的内容: 背景精灵 图片的主颜色 Padding边距 Scrollbar 滚动条对象的预制体或者对象, ...
- 利用logminer恢复delete误删除操作的数据
1环境准备 日志挖掘可以基于日志.基于时间.基于SCN分析,这里我们将演示一个基于SCN的分析案例. 开启补充日志功能(必须开始,否则不能捕获DML操作日志): 创建一张livan表,往里面插入了14 ...
- 2016HUAS暑假集训训练题 E - Rails
There is a famous railway station in PopPush City. Country there is incredibly hilly. The station wa ...
- Greenplum 生成加分区语句
在使用greenplum中会使用分区表,但同时分区表需要维护分区:比如加分区,这个过程比较痛苦,查询相关资料以后有了相应的解决办法,但是该办法也不是万能的,有诸多限制,关于限制有兴趣的同学可以查看我文 ...
- 局域网访问本地localhost页面
1.关闭防火墙 2.cmd - ipconfig - IPv4 地址 . . . . . . . . . . . . : 192.168.0.34 如果链接的是wifi,请右键确保手机和电脑链接同一个 ...
- BizTalk开发系列(二十二) 开发自定义Map Functoid
尽管 BizTalk Server 提供许多Functoid以支持一系列不同的操作,但仍可能会遇到需要其他方法的情况.<BizTalk开发系列 Map扩展开发>介绍了通过使用自定义 XSL ...
- 【iCore3 双核心板】例程二十一:LAN_TCPS实验——以太网数据传输
实验指导书及代码包下载: http://pan.baidu.com/s/1ntTjWpV iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- 【iCore3 双核心板_FPGA】例程二:GPIO输出实验——点亮三色LED
实验指导书及代码包下载: http://pan.baidu.com/s/1boiOJBT iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- Ubuntu每次启动都显示System program problem detected的解决办法
Ubuntu每次启动都显示System program problem detected的解决办法 sudo gedit /etc/default/apport 将enabled=1改为enabled ...