jQuery不間斷滾動(dòng)效果(模擬百度新聞支持文字/圖片/垂直滾動(dòng))
更新時(shí)間：2013年02月05日 11:52:02 投稿：whsnow
jQuery模擬百度新聞不間斷滾動(dòng)效果并且支持文字、圖片水平垂直滾動(dòng)等等，感興趣的朋友可以了解下，或許本文所提供的案例對(duì)你學(xué)習(xí)jquery特效有所幫助,好了話不多說(shuō)，切入正題
一、jQuery.roll 插件使用說(shuō)明
jQuery.roll 是模擬百度新聞不間斷滾動(dòng)效果，并支持文字、圖片水平垂直滾動(dòng)，該函數(shù)使用方法為：
復(fù)制代碼 代碼如下:
/*
* @module jQuery roll
* @param: contentCls 內(nèi)容容器className
* @param: contentParentId 內(nèi)容容器父元素節(jié)點(diǎn)ID
* @param: configs 配置參數(shù)
*
* @config: effect 滾動(dòng)效果
* @config: duration 滾動(dòng)1個(gè)像素的運(yùn)行時(shí)間(毫秒數(shù))
* @config: delay 開(kāi)始滾動(dòng)的延遲時(shí)間(毫秒數(shù))
*
*/
jQuery.roll(contentCls, contentParentId, configs);
二、函數(shù)源碼
復(fù)制代碼 代碼如下:
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
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="description" content="jQuery實(shí)現(xiàn)無(wú)間隙滾動(dòng)效果">
<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>文字列表滾動(dòng)</h1>
</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
復(fù)制代碼 代碼如下:
View Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="description" content="jQuery實(shí)現(xiàn)無(wú)間隙滾動(dòng)效果">
<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>文字列表滾動(dòng)</h1>
</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>
相關(guān)文章
基于jquery實(shí)現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)
一款非常乖巧的人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)效果，在瀏覽器屏幕內(nèi)，人物臉龐始終面向鼠標(biāo)轉(zhuǎn)動(dòng)，本篇文章給大家介紹基于jquery實(shí)現(xiàn)人物頭像跟隨鼠標(biāo)轉(zhuǎn)動(dòng)，有需要的朋友可以參考下2015-08-08
jquery 鍵盤(pán)事件 keypress() keydown() keyup()用法總結(jié)
在本篇文章里小編給各位整理的是關(guān)于jquery 鍵盤(pán)事件 keypress() keydown() keyup()用法總結(jié)以及相關(guān)實(shí)例，需要的朋友們學(xué)習(xí)下。2019-10-10
jQuery Ajax請(qǐng)求后臺(tái)數(shù)據(jù)并在前臺(tái)接收
這篇文章主要介紹了jQuery Ajax請(qǐng)求后臺(tái)數(shù)據(jù)并在前臺(tái)接收的相關(guān)資料,需要的朋友可以參考下2016-12-12
jQuery 樹(shù)形結(jié)構(gòu)的選擇器
樹(shù)形結(jié)構(gòu)里的節(jié)點(diǎn)，如果它不是根部，也不是末枝，那么它一定有父母和孩子。2010-02-02
基于BootStrap環(huán)境寫(xiě)jQuery tabs插件
這篇文章主要介紹了基于BootStrap環(huán)境寫(xiě)jQuery tabs插件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
jquery 如何動(dòng)態(tài)添加、刪除class樣式方法介紹
獲取與設(shè)置樣式 獲取class和設(shè)置class都可以使用attr()方法來(lái)完成。例如使用attr()方法來(lái)獲取p元素的class2012-11-11
這篇文章主要介紹了如何用jquery控制表格奇偶行及活動(dòng)行顏色,需要的朋友可以參考下2014-04-04
jQuery獲得各種控件Value的方法，使用jquery的朋友可以參考下。2010-11-11
jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法,涉及針對(duì)鼠標(biāo)事件的相應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)變換的相關(guān)操作技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-11-11
jQuery function的正確書(shū)寫(xiě)方法
jQuery function想必大家都不會(huì)陌生，web前端開(kāi)發(fā)人員經(jīng)常會(huì)接觸到，下面為大家介紹下它的正確書(shū)寫(xiě)方法，感興趣的朋友可以參考下2013-08-08