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

一、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>

赞 (0)

相关推荐

  • jQuery实现单行文字间歇向上滚动源代码

    使用jQuery实现单行文字间歇向上滚动 效果网址:http://www.keleyi.com/keleyi/phtml/textscroll.htm 本效果加强版:http://www.keleyi.com/a/bjac/532bedbffca1affa.htm 主要增加了光标悬停效果 以下是源代码: 复制代码 代码如下: <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/j

  • jQuery实现的文字逐行向上间歇滚动效果示例

    jQuery实现的文字逐行向上间歇滚动效果示例

    本文实例讲述了jQuery实现的文字逐行向上间歇滚动效果.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery文字逐行向上滚动代码</title> <link href="css/index.css" rel=&quo

  • 完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效

    1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.运行环境 IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现 4.所有图片

  • jquery插件之文字间歇自动向上滚动效果代码

    本文实例讲述了jquery插件之文字间歇自动向上滚动效果代码.分享给大家供大家参考,具体如下: 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

  • jquery文字上下滚动的实现方法

    复制代码 代码如下: //上下滚动 var textRoll=function(){ $('#notice p:last').css({'height':'0px','opacity': '0'}).insertBefore('#notice p:first').animate({'height':'35px','opacity': '1'}, 'slow', function() { $(this).removeAttr('style');}); } $(function(){ //触发上下文

  • jQuery文字横向滚动效果的实现代码

    很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: <div id="s" style="width:100px; position:relative; white-space:nowrap; overflow:hidden; height:20px;"> <div id="noticeList" style="

  • 如何使用jquery实现文字上下滚动效果

    实现文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字滚动</title> <style type="text/css"> #sidebar{width:20

  • jQuery实现公告文字左右滚动的实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    兼容各浏览器的文本行高 复制代码 代码如下: (function($){ $.fn.extend({ RollTitle: function(opt,callback){ if(!opt) var opt={}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line=opt.line?parseInt(opt.line,15):parseInt(_t

  • jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.1.单行滚动效果 无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} function AutoScroll(obj){ $(obj).find

  • jquery实现marquee效果(文字或者图片的水平垂直滚动)

    jquery实现marquee效果(文字或者图片的水平垂直滚动)

    原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现.后来又喜欢上了jquery,下面写的内容希望对初学者有些帮助,高手勿喷,但欢迎指导,感激不尽. 原理:无缝滚动的原理,就是利用两个内容相同的容器,来达到欺骗人的视觉的效果.然后通过整个大容器滚动条的左右或者上下的移动来实现滚动.下面附上一张手绘的图,来简要阐述下原理.首先,我们的目的是实现框1中的内容水平向左滚动(向右

随机推荐