首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)

Posted in Javascript onFebruary 05, 2013

一、jQuery.roll 插件使用说明
jQuery.roll 是模拟百度新闻不间断滚动效果，并支持文字、图片水平垂直滚动，该函数使用方法为： 

/* 
* @module jQuery roll 
* @param: contentCls 内容容器className 
* @param: contentParentId 内容容器父元素节点ID 
* @param: configs 配置参数 
* 
* @config: effect 滚动效果 
* @config: duration 滚动1个像素的运行时间(毫秒数) 
* @config: delay 开始滚动的延迟时间(毫秒数) 
* 
*/ 
jQuery.roll(contentCls, contentParentId, configs);

二、函数源码 
jQuery.extend({ 
roll: function(contentCls, contentParentId, configs){ 
var setTimeID, totalWidth = 0, totalHeight = 0, 
firstContent, secondContent, contents; 
(function(){ 
var singleContent, cloneContent, nodeList; 
singleContent = $(contentCls, contentParentId); 
nodeList = singleContent.children(); 
if (configs.effect === 'scrollX') { 
$.each(nodeList, function(idx, itm) { 
totalWidth += $(itm).outerWidth(true); 
}); 
singleContent.css({ 'width': totalWidth + 'px' }); 
} 
else if (configs.effect === 'scrollY') { 
$.each(nodeList, function(idx, itm) { 
totalHeight += $(itm).outerHeight(true); 
}); 
singleContent.css({ 'height': totalHeight + 'px' }); 
} 
cloneContent = singleContent.clone(); 
cloneContent.appendTo(contentParentId); 
contents = $(contentCls, contentParentId); 
firstContent = contents[0]; 
secondContent = contents[1]; 
if (configs.effect === 'scrollX') { 
$(firstContent).css({ 'left': 0 }); 
$(secondContent).css({ 'left': totalWidth + 'px' }); 
} 
else if (configs.effect === 'scrollY') { 
$(firstContent).css({ 'top': 0 }); 
$(secondContent).css({ 'top': totalHeight + 'px' }); 
} 
})() 
function cssAnimate(){ 
if (configs.effect === 'scrollX') { 
$(firstContent).css({ left: parseInt(firstContent.style.left, 10) - 1 + 'px' }); 
$(secondContent).css({ left: parseInt(secondContent.style.left, 10) - 1 + 'px' }); 
$.each(contents, function(idx, itm) { 
if (parseInt(itm.style.left,10) === -totalWidth) { 
$(itm).css({ left: totalWidth + 'px' }); 
} 
}); 
} 
else if (configs.effect === 'scrollY') { 
$(firstContent).css({ top: parseInt(firstContent.style.top, 10) - 1 + 'px' }); 
$(secondContent).css({ top: parseInt(secondContent.style.top, 10) - 1 + 'px' }); 
$.each(contents, function(idx, itm) { 
if (parseInt(itm.style.top,10) === -totalHeight) { 
$(itm).css({ top: totalHeight + 'px' }); 
} 
}); 
} 
setTimeId = setTimeout(cssAnimate, configs.duration); 
} 
function rollRun(){ 
setTimeId = setTimeout(cssAnimate, configs.delay); 
return jQuery; 
} 
function rollStop(){ 
clearTimeout(setTimeId); 
return jQuery; 
} 
return $.extend({ 
rollRun: rollRun, 
rollStop: rollStop 
}); 
} 
});

三、完整demo源码
例3.1 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta name="description" content="jQuery实现无间隙滚动效果"> 
<title>jQuery demo</title> 
<style> 
body { font: 12px/1.5 tahoma,"microsoft yahei","微软雅黑E\8F6F\96C5\9ED1"; } 
body, div, ul, li, h1 { margin: 0; padding: 0; } 
.news { margin: 100px 0 0 100px; } 
.news ul { list-style: none; } 
.news-box { width: 600px; margin-left: 20px; height: 24px; background-color: #fcfcfd; overflow: hidden; position: relative; _zoom: 1; } 
.news h1 { margin-bottom: 15px; padding-left: 20px; color: #370188; } 
.news-list { position: absolute; } 
.news-list { float: left; } 
.news-list li { float: left; _display: inline; margin-right: 15px; height: 24px; line-height: 24px; overflow: hidden; word-wrap: normal; } 
.news-list li a { text-decoration: none; color: #000; } 
.news-list li a:hover { 
-webkit-transition: color .2s linear,background-color .3s linear; 
-moz-transition: color .2s linear,background-color .3s linear; 
-ms-transition: color .2s linear,background-color .3s linear; 
-o-transition: color .2s linear,background-color .3s linear; 
transition: color .2s linear,background-color .3s linear; 
color: #FF4400; 
text-decoration: underline; 
} 
.news-list li a:visited { color: #290065; } 
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<div id="J_news" class="news"> 
<h1>文字列表滚动</h1> 
<div id="J_Roll_Container" class="news-box"> 
<ul class="J_Roll_Content news-list"> 
<li><a href="http://news.sina.com.cn/c/2013-01-10/121926003955.shtml" target="_blank">日方否认将对中国巡航钓鱼岛飞机</a></li> 
<li><a href="http://news.hf365.com/system/2013/01/10/012875943.shtml" target="_blank">日本防卫省否认将对中国飞机警告射击(图)</a></li> 
<li><a href="http://news.21cn.com/world/guojisaomiao/2013/01/10/14338977.shtml" target="_blank">日否认警告射击中海监飞机 恐中日因夺岛开战</a></li> 
</ul> 
</div> 
</div> 
<script> 
// 这里引用jQuery.roll代码 
</script> 
<script> 
$(function(){ 
var roll_jQuery, contents; 
roll_jQuery = $.roll('.J_Roll_Content', '#J_Roll_Container', { effect: 'scrollX', duration: 40, delay: 500 }).rollRun(); 
contents = $('.J_Roll_Content'); 
contents.bind('mouseenter', function(){ 
roll_jQuery.rollStop(); 
}); 
contents.bind('mouseleave', function(){ 
roll_jQuery.rollRun(); 
}); 
}); 
</script> 
</body> 
</html>

例3.2 
View Code 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta name="description" content="jQuery实现无间隙滚动效果"> 
<title>jQuery demo</title> 
<style> 
body { font: 12px/1.5 tahoma, "microsoft yahei", "微软雅黑E\8F6F\96C5\9ED1"; } 
body, div, ul, li, h1 { margin: 0; padding: 0; } 
.news { margin: 100px 0 0 100px; } 
.news ul { list-style: none; } 
.news-box { padding: 20px; width: 310px; height: 192px; background-color: #fcfcfd; overflow: hidden; position: relative; } 
.news h1 { margin-bottom: 15px; padding-left: 20px; color: #370188; } 
.news-list { position: absolute; } 
.news-list li { width: 100%; height: 24px; line-height: 24px; overflow: hidden; word-wrap: normal; } 
.news-list li a { text-decoration: none; color: #000; } 
.news-list li a:hover { 
-webkit-transition: color .2s linear, background-color .3s linear; 
-moz-transition: color .2s linear, background-color .3s linear; 
-ms-transition: color .2s linear, background-color .3s linear; 
-o-transition: color .2s linear, background-color .3s linear; 
transition: color .2s linear, background-color .3s linear; 
color: #FF4400; 
text-decoration: underline; 
} 
.news-list li a:visited { color: #290065; } 
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<div id="J_news" class="news"> 
<h1>文字列表滚动</h1> 
<div id="J_Roll_Container" class="news-box"> 
<ul class="J_Roll_Content news-list"> 
<li><a href="http://news.ifeng.com/world/detail_2013_01/11/21098447_0.shtml" target="_blank">在澳中国留学生涉嫌接送非法色情业者赚外快被罚</a></li> 
<li><a href="http://news.qq.com/a/20130111/000993.htm" target="_blank">印度北部等今冬遭遇极寒天气 已致数百人被冻死</a></li> 
<li><a href="http://news.qq.com/a/20130111/001251.htm" target="_blank">意大利警方禁止挂中国红灯笼 被指危险引燃物</a></li> 
<li><a href="http://news.sina.com.cn/c/2013-01-10/121926003955.shtml" target="_blank">日方否认将对中国巡航钓鱼岛飞机</a></li> 
<li><a href="http://news.hf365.com/system/2013/01/10/012875943.shtml" target="_blank">日本防卫省否认将对中国飞机警告射击(图)</a></li> 
<li><a href="http://news.21cn.com/world/guojisaomiao/2013/01/10/14338977.shtml" target="_blank">日否认警告射击中海监飞机 恐中日因夺岛开战</a></li> 
<li><a href="http://military.people.com.cn/n/2013/0110/c1011-20150261.html" target="_blank">传解放军举行长白山军演</a></li> 
<li><a href="http://news.21cn.com/world/guojisaomiao/2013/01/10/14335623.shtml" target="_blank">中国高新6号反潜机问世 反潜艇性能优于美军P-3C</a></li> 
<li><a href="http://opinion.huanqiu.com/opinion_world/2013-01/3467875.html" target="_blank">张建刚：2030年中国将圆海洋强国梦</a></li> 
<li><a href="http://news.hf365.com/system/2013/01/10/012873928.shtml" target="_blank">运-20现身试飞中心 可取代伊尔-76任何功能</a></li> 
<li><a href="http://mil.sohu.com/20130110/n362988784.shtml" target="_blank">东海舰队引入大批无人机 饱和攻击让日难以招架</a></li> 
</ul> 
</div> 
</div> 
<script> 
jQuery.extend({ 
roll: function(contentCls, contentParentId, configs){ 
var setTimeID, totalWidth = 0, totalHeight = 0, 
firstContent, secondContent, contents; 
(function(){ 
var singleContent, cloneContent, nodeList; 
singleContent = $(contentCls, contentParentId); 
nodeList = singleContent.children(); 
if (configs.effect === 'scrollX') { 
$.each(nodeList, function(idx, itm) { 
totalWidth += $(itm).outerWidth(true); 
}); 
singleContent.css({ 'width': totalWidth + 'px' }); 
} 
else if (configs.effect === 'scrollY') { 
$.each(nodeList, function(idx, itm) { 
totalHeight += $(itm).outerHeight(true); 
}); 
singleContent.css({ 'height': totalHeight + 'px' }); 
} 
cloneContent = singleContent.clone(); 
cloneContent.appendTo(contentParentId); 
contents = $(contentCls, contentParentId); 
firstContent = contents[0]; 
secondContent = contents[1]; 
if (configs.effect === 'scrollX') { 
$(firstContent).css({ 'left': 0 }); 
$(secondContent).css({ 'left': totalWidth + 'px' }); 
} 
else if (configs.effect === 'scrollY') { 
$(firstContent).css({ 'top': 0 }); 
$(secondContent).css({ 'top': totalHeight + 'px' }); 
} 
})() 
function cssAnimate(){ 
if (configs.effect === 'scrollX') { 
$(firstContent).css({ left: parseInt(firstContent.style.left, 10) - 1 + 'px' }); 
$(secondContent).css({ left: parseInt(secondContent.style.left, 10) - 1 + 'px' }); 
$.each(contents, function(idx, itm) { 
if (parseInt(itm.style.left,10) === -totalWidth) { 
$(itm).css({ left: totalWidth + 'px' }); 
} 
}); 
} 
else if (configs.effect === 'scrollY') { 
$(firstContent).css({ top: parseInt(firstContent.style.top, 10) - 1 + 'px' }); 
$(secondContent).css({ top: parseInt(secondContent.style.top, 10) - 1 + 'px' }); 
$.each(contents, function(idx, itm) { 
if (parseInt(itm.style.top,10) === -totalHeight) { 
$(itm).css({ top: totalHeight + 'px' }); 
} 
}); 
} 
setTimeId = setTimeout(cssAnimate, configs.duration); 
} 
function rollRun(){ 
setTimeId = setTimeout(cssAnimate, configs.delay); 
return jQuery; 
} 
function rollStop(){ 
clearTimeout(setTimeId); 
return jQuery; 
} 
return $.extend({ 
rollRun: rollRun, 
rollStop: rollStop 
}); 
} 
}); 
</script> 
<script> 
$(function(){ 
var roll_jQuery, contents; 
roll_jQuery = $.roll('.J_Roll_Content', '#J_Roll_Container', { effect: 'scrollY', duration: 40, delay: 500 }).rollRun(); 
contents = $('.J_Roll_Content'); 
contents.bind('mouseenter', function(){ 
roll_jQuery.rollStop(); 
}); 
contents.bind('mouseleave', function(){ 
roll_jQuery.rollRun(); 
}); 
}); 
</script> 
</body> 
</html>

jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript数组对象赋值用法实例
Aug 04 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
详解Node.js如何处理ES6模块
May 15 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 #Javascript
jquery zTree异步加载简单实例分享
Feb 05 #Javascript
JS打印gridview实现原理及代码
Feb 05 #Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 #Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 #Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 #Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 #Javascript
夸克(1) 酶(1) 界面设计(1) 粒子对撞机(1) 塑料(1) 天问一号(1) 对撞机(1) 国际空间站(1) 太空(1) 人造肉(1)
You might like
php curl post 时出现的问题解决
2014/01/30 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP基于GD库的缩略图生成代码（支持jpg,gif,png格式）
2014/06/19 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
javascript学习笔记（七）利用javascript来创建和存储cookie
2011/04/08 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
回顾Javascript React基础
2019/06/15 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
python实现五子棋游戏
2019/06/18 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
python3操作注册表的方法（Url protocol）
2020/02/05 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
美国第一香水网站：Perfume.com
2017/01/23 全球购物
求职信格式范本
2013/11/15 职场文书
家具促销活动方案
2014/02/16 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
2014年领班工作总结
2014/11/25 职场文书
电影红河谷观后感
2015/06/11 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL