jquery上下翻頁插件實現(xiàn)（js文件引用需要修改）
成都創(chuàng)新互聯(lián)2013年至今，先為河南等服務(wù)建站，河南等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為河南企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?""
html?xmlns=""
head
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/
title用jQuery插件實現(xiàn)的滾屏效果,帶上下翻頁控制按鈕CsrCode.Cn/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?type="text/javascript"?src="/js/jquery1.3.2.js"/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),?//每次滾動的行數(shù)，默認(rèn)為一屏，即父容器高度
speed=opt.speed?parseInt(opt.speed,10):500;?//卷動速度，數(shù)值越大，速度越慢（毫秒）
timer=opt.timer?//?parseInt(opt.timer,10):3000;?//滾動的時間間隔（毫秒）
if(line==0)?line=1;
var?upHeight=0-line*lineH;
//滾動函數(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:綁定向上按鈕的點擊事件
});
}
//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:自動播放
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:3000,up:"btn1",down:"btn2"});
});
/script
/head
body
p多行滾動演示：/p
div?id="scrollDiv"
ul
li
a??target="_blank"?href="#"
好漂亮十多個/a/li
li
a?title="CSS制作斜角上有背景圖片的Div層"?target="_blank"?href="#"
CSS制作斜角上有背景圖片的Div層/a/li
li
a?title="Js實現(xiàn)的層展開、層折疊效果，默認(rèn)時候?qū)邮钦郫B的"?target="_blank"?href="#"
Js實現(xiàn)的層展開、層折疊效果，默認(rèn)折疊/a/li
li
a?title="DIV始終固定在網(wǎng)頁右下角位置的CSS實現(xiàn)方法"?target="_blank"?href="#"
DIV固定在右下角位置的CSS實現(xiàn)方法/a/li
li
a?title="JavaScript未知高度元素的垂直居中的方法"?target="_blank"?href="#"
JavaScript未知高度元素的垂直居中的方法/a/li
li
a?title="漸變彩色的文字"?target="_blank"?href="#"
漸變彩色的文字/a/li
li
a?title="指定文字逐條顯示"?target="_blank"?href="#"
指定文字逐條顯示/a/li
li
a?title="滾動的標(biāo)題欄"?target="_blank"?href="#"
滾動的標(biāo)題欄/a/li
li
a?title="JS?4屏平滑滾動幻燈片特效"?target="_blank"?href="#"
JS?4屏平滑滾動幻燈片特效/a/li
li
a?title="圖片的無縫滾動（縱向、橫向）"?target="_blank"?href="#"
圖片的無縫滾動（縱向、橫向）/a/li
li
a?title="鼠標(biāo)觸及帶邊框的菜單"?target="_blank"?href="#"
鼠標(biāo)觸及帶邊框的菜單/a/li
li
a?title="比較實用的CSS控制鏈接顏色效果"?target="_blank"?href="#"
比較實用的CSS控制鏈接顏色效果/a/li
li
a?title="鼠標(biāo)接觸或者離開圖片時，圖片大小會相應(yīng)變化"?target="_blank"?href="#"
鼠標(biāo)接觸或者離開圖片時，圖片大小會相應(yīng)變化/a/li
li
a?title="特殊的鼠標(biāo)懸停提示"?target="_blank"?href="#"
特殊的鼠標(biāo)懸停提示/a/li
/ul
/div
span?id="btn2"向上翻頁/span
span?id="btn1"向下翻頁/span
/body
/html
本文實例講述了jQuery實現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊。分享給大家供大家參考。具體如下：
運行效果圖如下：
主要代碼如下：
$(function()
{
//加載時的圖片
var
$loader=
$('#st_loading');
//獲取的ul元素
var
$list=
$('#st_nav');
//當(dāng)前顯示的圖片
var
$currImage
=
$('#st_main').children('img:first');
//加載當(dāng)前的圖片
//同時顯示導(dǎo)航的項
$('img').load(function(){
$loader.hide();
$currImage.fadeIn(3000);
//滑出導(dǎo)航
setTimeout(function(){
$list.animate({'left':'0px'},500);
},
1000);
}).attr('src',$currImage.attr('src'));
//計算出將被顯示的略縮圖所在的div元素的寬度
buildThumbs();
function
buildThumbs(){
$list.children('li.album').each(function(){
var
$elem
=
$(this);
var
$thumbs_wrapper
=
$elem.find('.st_thumbs_wrapper');
var
$thumbs
=
$thumbs_wrapper.children(':first');
//每張略縮圖占有180像素的寬度和3像素的間距(margin)
var
finalW
=
$thumbs.find('img').length
*
183;
$thumbs.css('width',finalW
+
'px');
//是這元素具有滾動性
makeScrollable($thumbs_wrapper,$thumbs);
});
}
//點擊菜單項目的時候（向上向下箭頭切換）
//使略縮圖的div層顯示和隱藏當(dāng)前的
//打開菜單（如果有的話）
$list.find('.st_arrow_down').live('click',function(){
var
$this
=
$(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var
$elem
=
$this.closest('li');
$elem.addClass('current').animate({'height':'170px'},200);
var
$thumbs_wrapper
=
$this.parent().next();
$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click',function(){
var
$this
=
$(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});
//點擊略縮圖，改變大的圖片
$list.find('.st_thumbs
img').bind('click',function(){
var
$this
=
$(this);
$loader.show();
$('img
class="st_preview"/').load(function(){
var
$this
=
$(this);
var
$currImage
=
$('#st_main').children('img:first');
$this.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
//隱藏當(dāng)前已經(jīng)打開了的菜單的函數(shù)
function
hideThumbs(){
$list.find('li.current')
.animate({'height':'50px'},400,function(){
$(this).removeClass('current');
})
.find('.st_thumbs_wrapper')
.hide(200)
.andSelf()
.find('.st_link
span')
.addClass('st_arrow_down')
.removeClass('st_arrow_up');
}
//是當(dāng)前的略縮圖div層滾動
//當(dāng)鼠標(biāo)移至菜單層的時候會自動地進行滾動
function
makeScrollable($outer,
$inner){
var
extra
=
800;
//獲取菜單的寬度
var
divWidth
=
$outer.width();
//移除滾動條
$outer.css({
overflow:
'hidden'
});
//查找容器上的最后一張圖片
var
lastElem
=
$inner.find('img:last');
$outer.scrollLeft(0);
//當(dāng)用戶鼠標(biāo)離開菜單的時候
$outer.unbind('mousemove').bind('mousemove',function(e){
var
containerWidth
=
lastElem[0].offsetLeft
+
lastElem.outerWidth()
+
2*extra;
var
left
=
(e.pageX
-
$outer.offset().left)
*
(containerWidth-divWidth)
/
divWidth
-
extra;
$outer.scrollLeft(left);
});
}
});
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
1、新建一個html文件，命名為test.html。
2、在test.html文件內(nèi)，使用div標(biāo)簽創(chuàng)建一個模塊，并設(shè)置其id為mycss。
3、在css標(biāo)簽內(nèi)，定義div的樣式，設(shè)置其寬度為100px，高度為2000px，背景顏色為粉紅色。
4、在js標(biāo)簽內(nèi)，使用scroll()方法監(jiān)聽頁面的滾動條，并執(zhí)行function方法。
5、在function方法內(nèi)，使用if語句判斷，當(dāng)前滾動的位置（scrollTop()）是否到達頁面的底部（$(document).height()-$(window).height()），如果到達頁面底部，提示“已經(jīng)到底部了”。
本文實例講述了jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法。分享給大家供大家參考，具體如下：
一、Js代碼：
onload
=
function
()
{
//初始化
scrollToLocation();
};
function
scrollToLocation()
{
var
mainContainer
=
$('#thisMainPanel'),
scrollToContainer
=
mainContainer.find('.son-panel:last');//滾動到div
id="thisMainPanel"中類名為son-panel的最后一個div處
//scrollToContainer
=
mainContainer.find('.son-panel:eq(5)');//滾動到div
id="thisMainPanel"中類名為son-panel的第六個處
//非動畫效果
//mainContainer.scrollTop(
//
scrollToContainer.offset().top
-
mainContainer.offset().top
+
mainContainer.scrollTop()
//);
//動畫效果
mainContainer.animate({
scrollTop:
scrollToContainer.offset().top
-
mainContainer.offset().top
+
mainContainer.scrollTop()
},
2000);//2秒滑動到指定位置
}
二、Html代碼：
div
id="thisMainPanel"
style="height:200px;overflow-y:
scroll;border:1px
solid
#f3f3f3;"
div
class="son-panel"我是類容區(qū)域-1/div
div
class="son-panel"我是類容區(qū)域-2/div
div
class="son-panel"我是類容區(qū)域-3/div
div
class="son-panel"我是類容區(qū)域-4/div
div
class="son-panel"
style="height:160px;"我是類容區(qū)域-5/div
div
class="son-panel"我是類容區(qū)域-6/div
div
class="son-panel"我是類容區(qū)域-7/div
div
class="son-panel"我是類容區(qū)域-8/div
/div
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery
form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
重慶分公司
重慶分公司
