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>& ...
随机推荐
- 理解listagg函数
两道SQL面试题引出listagg函数: 1. 用一条sql求出每个部门(emp表)的最大工资和最小工资,以及最大工资和最小工资的员工姓名. (注:一次表扫描.同一个部门最大工资或最小工资的人可能不止 ...
- NGUI之Slider,最简单的方法做进度条。
既然标题是最简单的,那么很多东西就不需要我们自己做了,使用的是NGUI的示例,只针对初学者,接下来让我们来做一个最简单游戏设置里的声音控制. 1.导入NGUI: 2.找到NGUI的Menu示例Demo ...
- java容器学习
容器是java中重要的一部分,其接口的结构如下 Collection | ------------------ Map | | | Set List HashMap | HashSet 顾名思义,容器 ...
- javascript 百度地图
官方地址 http://lbsyun.baidu.com/index.php?title=jspopular 示例地址 http://developer.baidu.com/map/jsdemo.ht ...
- 数的长度---nyoj69
超时 #include <stdio.h>#include <string.h>#define M 1000001int shu[M]; int main(){ int n, ...
- ubuntu安装Python环境以及科学计算环境
参考:http://blog.csdn.net/a1311543690/article/details/ 1.sudo apt-get install python-pip pip是Python的一个 ...
- 深入分析 Java 中的中文编码问题
登录 (或注册) 中文 IBM 技术主题 软件下载 社区 技术讲座 打印本页面 用电子邮件发送本页面 新浪微博 人人网 腾讯微博 搜狐微博 网易微博 Digg Facebook Twitter Del ...
- PG, Pool之间的一些数量关系
先说一下我的环境: Ceph cluster中包含6台OSD节点 (osd.0 - 5), 一共有10个Pool (0 - 9), 这些Pool共享了144个PG (这个数字是所有Pool的PG_SI ...
- 【iCore3 双核心板_FPGA】例程四:Tcl脚本实验——配置引脚
实验指导书及代码包下载: http://pan.baidu.com/s/1pJZDz0v iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- linux命令学习(1):grep 命令
Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...