怎么用jquery做上下翻页

jquery上下翻页插件实现（js文件引用需要修改）

成都创新互联2013年至今，先为河南等服务建站，河南等地企业，进行企业商务咨询服务。为河南企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

!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插件实现的滚屏效果,带上下翻页控制按钮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){

//参数初始化

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), //每次滚动的行数，默认为一屏，即父容器高度

speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒）

timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）

if(line==0) line=1;

var upHeight=0-line*lineH;

//滚动函数

var scrollUp=function(){

_btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定

_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:向下翻页函数

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);

};

//鼠标事件绑定

_this.hover(autoStop,autoPlay).mouseout();

_btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定

_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实现的层展开、层折叠效果，默认时候层是折叠的" target="_blank" href="#"

Js实现的层展开、层折叠效果，默认折叠/a/li

li

a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="#"

DIV固定在右下角位置的CSS实现方法/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="滚动的标题栏" target="_blank" href="#"

滚动的标题栏/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="鼠标触及带边框的菜单" target="_blank" href="#"

鼠标触及带边框的菜单/a/li

li

a title="比较实用的CSS控制链接颜色效果" target="_blank" href="#"

比较实用的CSS控制链接颜色效果/a/li

li

a title="鼠标接触或者离开图片时，图片大小会相应变化" target="_blank" href="#"

鼠标接触或者离开图片时，图片大小会相应变化/a/li

li

a title="特殊的鼠标悬停提示" target="_blank" href="#"

特殊的鼠标悬停提示/a/li

/ul

/div

span id="btn2"向上翻页/span

span id="btn1"向下翻页/span

/body

/html

jQuery实现带滚动导航效果的全屏滚动相册实例

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：

运行效果图如下：

主要代码如下：

$(function()

{

//加载时的图片

var

$loader=

$('#st_loading');

//获取的ul元素

var

$list=

$('#st_nav');

//当前显示的图片

var

$currImage

=

$('#st_main').children('img:first');

//加载当前的图片

//同时显示导航的项

$('img').load(function(){

$loader.hide();

$currImage.fadeIn(3000);

//滑出导航

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层显示和隐藏当前的

//打开菜单（如果有的话）

$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'});

});

//隐藏当前已经打开了的菜单的函数

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');

}

//是当前的略缩图div层滚动

//当鼠标移至菜单层的时候会自动地进行滚动

function

makeScrollable($outer,

$inner){

var

extra

=

800;

//获取菜单的宽度

var

divWidth

=

$outer.width();

//移除滚动条

$outer.css({

overflow:

'hidden'

});

//查找容器上的最后一张图片

var

lastElem

=

$inner.find('img:last');

$outer.scrollLeft(0);

//当用户鼠标离开菜单的时候

$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程序设计有所帮助。

如何让jquery动画效果在屏幕滚动到指定位置才执行

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用div标签创建一个模块，并设置其id为mycss。

3、在css标签内，定义div的样式，设置其宽度为100px，高度为2000px，背景颜色为粉红色。

4、在js标签内，使用scroll()方法监听页面的滚动条，并执行function方法。

5、在function方法内，使用if语句判断，当前滚动的位置（scrollTop()）是否到达页面的底部（$(document).height()-$(window).height()），如果到达页面底部，提示“已经到底部了”。

jQuery实现将div中滚动条滚动到指定位置的方法

本文实例讲述了jQuery实现将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"我是类容区域-1/div

div

class="son-panel"我是类容区域-2/div

div

class="son-panel"我是类容区域-3/div

div

class="son-panel"我是类容区域-4/div

div

class="son-panel"

style="height:160px;"我是类容区域-5/div

div

class="son-panel"我是类容区域-6/div

div

class="son-panel"我是类容区域-7/div

div

class="son-panel"我是类容区域-8/div

/div

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jQuery

form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

分享题目：jquery滚屏,js全屏滚动
文章路径：http://kswjz.com/article/dsshijs.html