jquery滾動(dòng)特效集錦
更新時(shí)間：2015年06月03日 08:56:17 投稿：hebedich
本文給大家匯總介紹的是jquery單行滾動(dòng)、批量多行滾動(dòng)、文字圖片翻屏滾動(dòng)效果代碼，都是分廠常用的一些文字以及圖文的無縫滾動(dòng)特效，希望能夠?qū)Υ蠹沂煜Query有所幫助。
jquery單行滾動(dòng)、批量多行滾動(dòng)、文字圖片翻屏滾動(dòng)效果代碼，需要的朋友可以參考下。
以下代碼，運(yùn)行后，需要刷新下，才能加載jquery,要不然看不到效果。
一、單行滾動(dòng)效果
<!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="Content-Type" c />
<title>無標(biāo)題文檔</title>
<style type="text/css">
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;}
</style>
<script src="http://img.jb51.net/jslib/jquery/jquery14.js" type="text/javascript"></script>
<script type="text/javascript">
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',1000)
});
</script>
</head>
<body>
<div id="scrollDiv">
<ul>
<li>百度 www.baidu.com</li>
<li>腳本之家 www.dhdzp.com</li>
<li>這是公告標(biāo)題的第三行</li>
<li>這是公告標(biāo)題的第四行</li>
<li>這是公告標(biāo)題的第五行</li>
<li>這是公告標(biāo)題的第六行</li>
<li>這是公告標(biāo)題的第七行</li>
<li>這是公告標(biāo)題的第八行</li>
</ul>
</div>
</body>
</html>
二,多行滾動(dòng)效果
<!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="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://img.jb51.net/jslib/jquery/jquery14.js" type="text/javascript"></script>
<script type="text/javascript">
//滾動(dòng)插件
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//參數(shù)初始化
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(), //獲取行高
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滾動(dòng)的行數(shù)，默認(rèn)為一屏，即父容器高度
speed=opt.speed?parseInt(opt.speed,10):500, //卷動(dòng)速度，數(shù)值越大，速度越慢（毫秒）
timer=opt.timer?parseInt(opt.timer,10):3000; //滾動(dòng)的時(shí)間間隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
//滾動(dòng)函數(shù)
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
//鼠標(biāo)事件綁定
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp()",timer);
}).mouseout();
}
})
})(jQuery);
$(document).ready(function(){
$("#scrollDiv").Scroll({line:4,speed:500,timer:1000});
});
</script>
</head>
<body>
<p>多行滾動(dòng)演示：</p>
<div id="scrollDiv">
<ul>
<li>百度 www.baidu.com</li>
<li>腳本之家 www.dhdzp.com</li>
<li>這是公告標(biāo)題的第三行</li>
<li>這是公告標(biāo)題的第四行</li>
<li>這是公告標(biāo)題的第五行</li>
<li>這是公告標(biāo)題的第六行</li>
<li>這是公告標(biāo)題的第七行</li>
<li>這是公告標(biāo)題的第八行</li>
</ul>
</div>
</body>
</html>
三、可控制向前向后的多行滾動(dòng)
<!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="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://img.jb51.net/jslib/jquery/jquery14.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//參數(shù)初始化
if(!opt) var opt={};
var _btnUp = $("#"+ opt.up);//Shawphy:向上按鈕
var _btnDown = $("#"+ opt.down);//Shawphy:向下按鈕
var timerID;
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(), //獲取行高
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滾動(dòng)的行數(shù)，默認(rèn)為一屏，即父容器高度
speed=opt.speed?parseInt(opt.speed,10):500; //卷動(dòng)速度，數(shù)值越大，速度越慢（毫秒）
timer=opt.timer //?parseInt(opt.timer,10):3000; //滾動(dòng)的時(shí)間間隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
//滾動(dòng)函數(shù)
var scrollUp=function(){
_btnUp.unbind("click",scrollUp); //Shawphy:取消向上按鈕的函數(shù)綁定
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
_btnUp.bind("click",scrollUp); //Shawphy:綁定向上按鈕的點(diǎn)擊事件
});
}
//Shawphy:向下翻頁函數(shù)
var scrollDown=function(){
_btnDown.unbind("click",scrollDown);
for(i=1;i<=line;i++){
_this.find("li:last").show().prependTo(_this);
}
_this.css({marginTop:upHeight});
_this.animate({
marginTop:0
},speed,function(){
_btnDown.bind("click",scrollDown);
});
}
//Shawphy:自動(dòng)播放
var autoPlay = function(){
if(timer)timerID = window.setInterval(scrollUp,timer);
};
var autoStop = function(){
if(timer)window.clearInterval(timerID);
};
//鼠標(biāo)事件綁定
_this.hover(autoStop,autoPlay).mouseout();
_btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠標(biāo)事件綁定
_btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);
}
})
})(jQuery);
$(document).ready(function(){
$("#scrollDiv").Scroll({line:4,speed:500,timer:1000,up:"btn1",down:"btn2"});
});
</script>
</head>
<body>
<p>多行滾動(dòng)演示：</p>
<div id="scrollDiv">
<ul>
<li>這是公告標(biāo)題的第一行</li>
<li>這是公告標(biāo)題的第二行</li>
<li>這是公告標(biāo)題的第三行</li>
<li>這是公告標(biāo)題的第四行</li>
<li>這是公告標(biāo)題的第五行</li>
<li>這是公告標(biāo)題的第六行</li>
<li>這是公告標(biāo)題的第七行</li>
<li>這是公告標(biāo)題的第八行</li>
</ul>
</div>
<span id="btn1">向前</span> <span id="btn2">向后</span>
</body>
</html>
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- jquery實(shí)現(xiàn)圖片左右間隔滾動(dòng)特效(可自動(dòng)播放)
- 完美兼容各大瀏覽器的jQuery仿新浪圖文淡入淡出間歇滾動(dòng)特效
- jQuery插件windowScroll實(shí)現(xiàn)單屏滾動(dòng)特效
- jquery圖片滾動(dòng)放大代碼分享（1）
- jQuery實(shí)現(xiàn)圖片左右滾動(dòng)特效
- jQuery左右滾動(dòng)支持圖片放大縮略圖圖片輪播代碼分享
- jquery實(shí)現(xiàn)圖片水平滾動(dòng)效果代碼分享
- jQuery實(shí)現(xiàn)自動(dòng)與手動(dòng)切換的滾動(dòng)新聞特效代碼分享
- jquery圖片滾動(dòng)放大代碼分享（2）
- jQuery滿屏焦點(diǎn)圖左右滾動(dòng)特效代碼分享
- JQuery實(shí)現(xiàn)左右滾動(dòng)菜單特效
相關(guān)文章
Json2Template.js 基于jquery的插件 綁定JavaScript對(duì)象到Html模板中
Json2Template.js是一個(gè)Jquery插件, 用來綁定JavaScript對(duì)象到Html模板中2011-10-10
jQuery實(shí)現(xiàn)在下拉列表選擇時(shí)獲取json數(shù)據(jù)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)在下拉列表選擇時(shí)獲取json數(shù)據(jù)的方法,主要涉及jQuery中g(shù)etJSON方法的使用技巧,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JQuery EasyUI 數(shù)字格式化處理方法,需要的朋友可以參考下2014-05-05
jquery實(shí)現(xiàn)的讓超出顯示范圍外的導(dǎo)航自動(dòng)固定屏幕最頂上
經(jīng)常會(huì)遇到這樣的情況，當(dāng)頁面展示內(nèi)容過長(zhǎng)時(shí)，想點(diǎn)導(dǎo)航切換欄目，就得把滾動(dòng)條拉回到頂上，這樣操作總不太人性化，能不能讓導(dǎo)航超出顯示范圍外時(shí)自動(dòng)貼在屏幕最頂上呢？答案肯定是能的。如果不太明白，把滾動(dòng)條拉到下面點(diǎn)，看下我博客是效果就明白了。2011-09-09
這篇文章主要介紹了jQuery操作Table技巧,實(shí)例匯總了jQuery針對(duì)Table的鼠標(biāo)響應(yīng)、樣式修改、添加刪除等常用技巧,需要的朋友可以參考下2016-01-01
jquery實(shí)現(xiàn)的回旋滾動(dòng)效果完整實(shí)例【附demo源碼下載】
這篇文章主要介紹了jquery實(shí)現(xiàn)的回旋滾動(dòng)效果,可實(shí)現(xiàn)點(diǎn)擊后側(cè)圖片呈現(xiàn)立體翻轉(zhuǎn)切換的功能,涉及jQuery插件roundabout.js的使用,并附帶了完整實(shí)例demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
在初始化jQuery對(duì)象的代碼開始之前聲明了一大堆變量。主要包括：全局變量的備份；處理字符串用的正則表達(dá)式；檢測(cè)瀏覽器的正則表達(dá)式；對(duì)核心函數(shù)的引用備份。這里略過大部分，只說兩種：全局變量和瀏覽器檢測(cè)。2011-05-05
jQuery UI結(jié)合Ajax創(chuàng)建可定制的Web界面
這篇文章主要為大家詳細(xì)介紹了jQuery UI結(jié)合Ajax創(chuàng)建可定制的Web界面，如何利用Ajax和jQuery UI創(chuàng)建具有各種定制功能的高度可定制的UI，感興趣的小伙伴們可以參考一下2016-06-06
實(shí)時(shí)監(jiān)控input框,實(shí)現(xiàn)輸入框與下拉框聯(lián)動(dòng)的實(shí)例
下面小編就為大家分享一篇實(shí)時(shí)監(jiān)控input框,實(shí)現(xiàn)輸入框與下拉框聯(lián)動(dòng)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了jQuery制作簡(jiǎn)單柱狀圖的方法,實(shí)例分析了html與css布局以及jQuery功能的具體實(shí)現(xiàn)方法,需要的朋友可以參考下2015-01-01