<!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>用jQuery插件实现的滚屏效果</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="jquery1.5.1.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();
}
})
})(jQuery);
$(document).ready(function(){
$("#scrollDiv").Scroll({line:4,speed:500,timer:3000});
});
</script>
</head>
<body>
<p>多行滚动演示:</p>
<div id="scrollDiv">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
<li>999</li>
<li>1010</li>
<li>1111</li>
<li>1212</li>
<li>1313</li>
<li>1414</li>
</ul>
</div>
</body>
</html>
分享到:
相关推荐
jquery 插件,实现多种不同的滚屏操作,
一款酷狗音乐宽屏滚动图片切换,来自jQuery focus插件实现的特效,如示例截图所示,效果十分大气,宽屏风格,鼠标悬停时会显示...也使用过这种效果,最核心的是一款jquery插件jquery.focus.js来实现,已附在下载包中。
插件描述:iosSlider iosSlider是一个可定制的、跨浏览器幻灯片jQuery插件。设计用于作为内容滑块、旋转木马、滚动网站旗帜或者图片库。其效果类似于ios的横向滚屏效果.参考示例:...
1、使用JQuery进行项目开发,搭配部分如mousewheel、wow.js、animate.css、swiper等插件实现六大滚屏子页面,如首页、品牌页、游戏详情页、国风文化页、新闻资讯页、游戏文化页。 2、页面数据基本由Ajax请求得来平且...
皮皮时光机全屏滚动jquery特效是一款非常漂亮的皮皮时光机网站全屏滚动代码特效,此特效目前非常流行,广泛应用于各种产品介绍页面,此滚动特效基于jQuery插件jquery.mousewheel.min.js,www.777moban.com 效果还是...
Scrollator 是基于 jQuery 的浏览器滚动条替代品,不占用任何的空间,并且性能超好。 在线演示 标签:Scrollator
实现效果: 非常实用的jQuery单页全屏垂直滚动特效代码,如今非常流行的特效代码,常用于产品功能介绍 或者项目简介,此款jQuery插件滚动还是比较流畅,有些插件需要页面滚动到位才能切换页面, 此特效还是比较...
一个无缝循环滚动插件,基于jQuery实现。。。
NULL 博文链接:https://shuzheng5201314.iteye.com/blog/954281
该文件包含三个jquery的页面底部自动加载的插件,下载后引入项目中直接可使用
自动滚屏一个 jQuery 插件,可以让元素滚动到底部,然后在它到达底部时备份。
首先说一下fullpage,它是一个jquery的插件,用来实现鼠标向上向下滑动,就会自动切换到上一屏或者下一屏,对于要做一些高大上的效果确实是一个很好的插件。首先先展示一下基本的效果图。 总共有四屏的内容 ...
jQuery滚屏锚点定位插件,利用mousewheel库实现滚屏事件,同时支持侧边栏控制
jQuery触摸手机全屏上下滑动滚屏特效简易快速引用插件即可使用
插件描述:原生JS写的,自己写的. 参考示例:http://www.jq22.com/jquery-info5358
代码显示,弹出层,滚屏,时间控件,瀑布流,悬浮
整屏滚动jQuery页面滚屏插件multiscroll.js,页面整屏滚动,滚动鼠标每次一屏,完成效果呈现。
插件描述:当前流行的大屏上下滚动,当前遇到效果最好的一个. 参考示例:http://www.jq22.com/jquery-info4598
使用方法<link rel="stylesheet" href="../src/wheel.css">[removed][removed][removed][removed][removed] jQuery(function ($) { var option={ active:'cur',//当前显示元素追加样式名 ul:'.pageUl',//滚动...
js特效皮皮时光机全屏滚动是一款非常漂亮的皮皮时光机网站全屏滚动代码特效,此特效目前非常流行,广泛应用于各种产品介绍页面,此滚动特效基于jQuery插件jquery.mousewheel.min.js,效果还是很流畅的,滚屏的数量取...