jQuery插件windowScroll实现单屏滚动特效
回首望，曾经洋洋得意的代码现在不忍直视。曾经看起来碉堡的效果现在也能稍微弄点出来。社会在往前发展，人也不得不向前走。
参考于搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑，还有很多可以拓展的空间。希望大家能多提意见与建议。
代码如下:
HTML
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="author" content="codetker" />
<head>
<title>window对象滚动插件</title>
<link href="style/reset.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.codetker.windowScroll.js"></script>
</head>
<body scroll="no">
<div class="wrap" style="dispaly:block;">
<div class="stageControl">
<ul>
<li>stage1</li>
<li>stage2</li>
<li>stage3</li>
<li>stage4</li>
<li>stage5</li>
</ul>
</div>
<div class="stage stage1">
<div class="pageControl">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</div>
<div class="page page1"></div>
<div class="page page2"></div>
<div class="page page3"></div>
</div>
<div class="stage stage2"></div>
<div class="stage stage3"></div>
<div class="stage stage4"></div>
<div class="stage stage5"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".wrap").windowScroll({
'choose' : 0,
'verticalSpeed' : 2, //控制垂直滚动速度
'horizontalSpeed' : 1,
'objControlUl': '.wrap .stageControl'
});
$(".stage1").windowScroll({
'choose': 1,
'verticalSpeed' : 1,
'horizontalSpeed' : 1,//控制水平滚动速度
'objControlUl': '.stage1 .pageControl'
});
});
</script>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body{
margin:0 0;
padding:0 0;
height:100%;
width:100%;
overflow: hidden;;
}
.wrap{
font-family:"微软雅黑","宋体", Times, "Times New Roman", serif;
font-size:14px;
margin:0 0;
padding:0 0;
height:100%;
width:100%;
overflow:hidden;
}
.stage,.page{
width: 100%;
height: 100%;
}
.stage1{
background-color:red;
}
.stage2{
background-color:#fff;
}
.stage3{
background-color:yellow;
}
.stage4{
background-color:green;
}
.stage5{
background-color:blue;
}
.page{
float: left;
}
.page2{
background-color: #666;
}
.page3{
background-color: #ddd;
}
.stageControl{
position: fixed;
}
.stageControl ul li{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.stageControl ul li:hover{
color: blue;
}
.pageControl{
position: fixed;
left: 200px;
}
.pageControl ul li{
float: left;
width: 50px;
height: 25px;
line-height: 25px;
text-align: center;
cursor: pointer;
}
.pageControl ul li:hover{
color: blue;
}
JavaScript
/*
* windowScroll 0.1
* window滚动插件，上下左右，可选择是否回弹。参考搜狗欢迎页面
* 兼容IE,FF,Chrome等常见浏览器
* 借鉴搜狗4.2版http://ie.sogou.com/features4.2.html
*/
;(function($,window,document,undefined){
//定义构造函数
var WindowObj=function(ele,opt){
this.$element=ele; //最外层对象
this.defaults={
'choose' : 0,//默认为上下
'verticalSpeed' : 1,
'horizontalSpeed' : 1,
'objControlUl': null
},
this.options=$.extend({},this.defaults,opt );
//阻止默认行为和冒泡,这里可以定义多个方法都要用到的函数
this.stopDefaultAndBubble=function(e){
e=e||window.event;
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue=false;
if (e.stopPropagation) {
e.stopPropagation();
}
e.cancelBubble=true;
}
this.setSize=function(ele){
$(ele).css({
'width':$(window).outerWidth()+'px'
});
//自动判断元素是否存在，对undefined赋css属性无意义
$(ele).children('.stage').css({
'width':$(window).outerWidth()+'px',
'height':$(window).outerHeight()+'px'
});
$(ele).children('.page').css({
'width':$(window).outerWidth()+'px',
'height':$(window).outerHeight()+'px'
});
}
}
//给构造函数添加方法
WindowObj.prototype={
//上下滚动的方法
verticalMove:function(){
var obj=this.$element; //最外层对象
var speed=this.options.verticalSpeed;
var objControl=this.options.objControlUl;//控制按钮
var windowHeight=$(window).height();
var list=$(obj).children('.stage');
var listMax=$(list).length;
var is_chrome=navigator.userAgent.toLowerCase().indexOf('chrome')>-1;
if(is_chrome){
//判断webkit内核，供scrollTop兼容性使用
windowobject='body';
}else{
//支持IE和FF
windowobject='html';
}
var stop=0;
//均设置为windows大小
this.setSize(obj);
//得到当前的垂直位置
var stageIndex;
function getIndex(){
stageIndex=Math.round($(window).scrollTop()/windowHeight);
}
//绑定键盘上下按键事件
$(document).keydown(function(event) {
/* 绑定keycode38，即向上按钮 */
if (event.keyCode==38) {
getIndex();
setTimeout(function(){
scrollStage(windowobject,stageIndex,1); //stageIndex为当前页码
},100);
}else if (event.keyCode==40) {//绑定40，即向下按钮
getIndex();
setTimeout(function(){
scrollStage(windowobject,stageIndex,-1); //stageIndex为当前页码
},100);
}
});
//绑定滑轮功能的函数
function handle(delta){
getIndex();
if (delta<0) {
setTimeout(function(){
scrollStage(windowobject,stageIndex,-1); //stageIndex为当前页码
},100);
}else{
setTimeout(function(){
scrollStage(windowobject,stageIndex,1); //stageIndex为当前页码
},100);
}
}
//判断滑轮，解决兼容性
function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail;
}
if (delta)
handle(delta); //调用执行函数
}
//注册事件
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
//绑定鼠标滚轮事件
$(document).bind('mousedown', function(event) {
if (e.which==2) {//which=2代表鼠标滚轮,即为中键
this.stopDefaultAndBubble(e);
//bugfix 搜狗浏览器的ie内核只有在定时器触发这个函数才生效
setTimeout(function(){
this.stopDefaultAndBubble(e);
},10);
}
});
//如果有ul li控制按钮
if (objControl!=null) {
$(objControl).delegate('li', 'click', function() {
stageIndex=$(this).index();
setTimeout(function(){
scrollStage(windowobject,stageIndex,0);
},100);
});
}
function scrollStage(obj,stIndex,dir){//如果用scrollStage=function来指定的话没有声明提前，然后就会找不到这个函数了
//obj为操作滚动的对象
//stIndex为点击调用时应该滚动到的页面页码，按键和滚轮调用时默认为1(传入0)
//dir传入滚动时的方向，0代表不滚动，1代表向上，-1代表向下
var sIndex=stIndex;//!(dir)则stageIndex为要到的页码，否则为当前页码
var windowobject=obj;
var direction=0||dir; //接收参数封装,没有传入时暂时认为为0
var target=windowHeight*sIndex; //目标页面距离文档顶部距离
if ( !$(windowobject).is(':animated') ) {//当没有在滚动时
if(!direction){ ////响应guider,此时stageIndex为目标页面页码
if ($(window).scrollTop() > target) { //内容下移，窗口上移,上方出现弹痕
direction=-1;
$(windowobject).animate({
"scrollTop": target +"px"
},1000*speed,function(){
crash_bottom(1,target,20,150); //调用撞击函数,先撞顶部,target变成当前页面了
});
}else if($(window).scrollTop() == windowHeight*sIndex){ //当前页面时
direction=0;
crash_bottom(1, target ,20,150); //模拟撞底部
}else{
direction=1;
$(windowobject).animate({
"scrollTop": target +"px"
},1000*speed,function(){
crash(1,target,20,150); //调用撞击函数,先撞底部
});
}
}else{//响应鼠标滚轮和键盘上下，sindex为当前页面
if(direction==1){
if(sIndex==0){
crash(1,target,20,150);
}else{ //往上翻
sIndex-=1;
$(windowobject).animate({
"scrollTop":windowHeight*sIndex+"px"
},1000*speed,function(){
crash_bottom(1,windowHeight*sIndex,20,150); //调用撞击函数,往下翻内容往上，先撞顶部
}
);
}
}else{
if(sIndex==listMax){
crash_bottom(1,target,20,150);
}else{ //往下翻
sIndex+=1;
$(windowobject).animate({
"scrollTop":windowHeight*sIndex+"px"
},1000*speed,function(){
crash(1,windowHeight*sIndex,20,150); //调用撞击函数,往上翻内容往下，先撞底部
});
}
}
}
}
}
//撞击函数
function crash_bottom(direction,termin,distant,time){
if (!stop) {
var scrollTop=$(window).scrollTop();
if (direction==1) {
direction=0;
$(windowobject).animate({"scrollTop":"+="+distant+"px"},time,function(){
crash_bottom(direction,termin,distant*0.6,time);
if (distant<=15||time>150) {
stop=1;//停止碰撞
$(windowobject).animate({"scrollTop":termin+"px"},time,function(){
stop=0;
});
}
});
}else if (direction==0) {
direction=1;
$(windowobject).animate({"scrollTop":termin+"px"},time,function(){
crash_bottom(direction,termin,distant*0.6,time);
if (distant<=15||time>150) {
stop=1;//停止碰撞
$(windowobject).animate({"scrollTop":termin+"px"},time,function(){
stop=0;
});
}
});
}
}
}
function crash(direction,termin,distant,time){
if (!stop) {
var scrollTop=$(window).scrollTop();
if (direction==1) {
direction=0;
$(windowobject).animate({"scrollTop":"-="+distant+"px"},time,function(){
crash(direction,termin,distant*0.6,time);
if (distant<=15||time>150) {
stop=1;//停止碰撞
$(windowobject).animate({"scrollTop":termin+"px"},time,function(){
stop=0;
});
}
});
}else if (direction==0) {
direction=1;
$(windowobject).animate({"scrollTop":termin+"px"},time,function(){
crash(direction,termin,distant*0.6,time);
if (distant<=15||time>150) {
stop=1;//停止碰撞
$(windowobject).animate({"scrollTop":termin+"px"},time,function(){
stop=0;
});
}
});
}
}
}
},
//左右滚动的方法
horizontalMove:function(){
var obj=this.$element; //最外层对象
var speed=this.options.horizontalSpeed;
var objControl=this.options.objControlUl;//控制按钮
var windowWidth=$(window).width();
var list=$(obj).children('.page');
var listMax=$(list).length;
var is_chrome=navigator.userAgent.toLowerCase().indexOf('chrome')>-1;
if(is_chrome){
//判断webkit内核，供scrollTop兼容性使用
windowobject='body';
}else{
//支持IE和FF
windowobject='html';
}
var stop=0;
//均设置为windows大小
this.setSize(obj);
$(obj).css({'width':windowWidth*listMax+'px'});
var pageIndex; //当前页面页码(负数)
function getPageIndex(){
pageIndex=Math.round(parseInt($(obj).css("margin-left")) / windowWidth);
}
//绑定键盘左右按键事件
$(document).keydown(function(event){
//判断event.keyCode为39（即向右按钮）
if (event.keyCode==39) {
getPageIndex();
scrollPage($(obj),pageIndex,-1);
}
//判断event.keyCode为37（即向左按钮
else if (event.keyCode==37) {
getPageIndex();
scrollPage($(obj),pageIndex,1);
}
});
//如果有ul li控制按钮
if (objControl!=null) {
$(objControl).delegate('li', 'click', function() {
pageIndex=$(this).index();
setTimeout(function(){
scrollPage(obj,pageIndex,0);
},100);
});
}
function scrollPage(obje,pIndex,dir){
var windowobject=obje;
var direction=0||dir;
var pageIndex=pIndex;
var dist=Math.round(parseInt($(obj).css("margin-left"))); //当前页距离左边的margin(负值)
var aim=pageIndex*windowWidth*(-1);
if (!$(windowobject).is(":animated")) {
if(!direction){ //响应nav
if (dist != aim) { //此时pageIndex为yearID.非负值
$(windowobject).animate({"margin-left": aim + "px"},
1000*speed);
}else{
direction=0;
$(windowobject).animate({"margin-left":"+="+"50px"},500).animate({"margin-left":"-="+"100px"},500).animate({"margin-left":"+="+"50px"},500);
}
}else{ //响应键盘左右键
if(direction==1){ //pageIndex为负值
if(pageIndex==0){
$(windowobject).animate({"margin-left":"+="+"50px"},500).animate({"margin-left":"-="+"100px"},500).animate({"margin-left":"+="+"50px"},500);
}else{
pageIndex+=1; //显示左边内容，左键
$(windowobject).animate({"margin-left":"+=" + windowWidth + "px"},
1000*speed);
}
}else{
if(pageIndex== ((-1)*(listMax-1))){
$(windowobject).animate({"margin-left":"-="+"50px"},500).animate({"margin-left":"+="+"100px"},500).animate({"margin-left":"-="+"50px"},500);
}else{
pageIndex-=1;
$(windowobject).animate({"margin-left":"-=" + windowWidth + "px"},
1000*speed);
}
}
}
}
}
}
}
//在插件中使用windowObj对象的方法，0为vertical，1为horizontal
$.fn.windowScroll=function(options){
//创建实体
var windowObj=new WindowObj(this,options);
//根据选择调用方法
if (windowObj.options.choose==0) {
return windowObj.verticalMove();
}else if(windowObj.options.choose==1){
return windowObj.horizontalMove();
}else{//2之后的留扩展吧
//add some functions
}
}
})(jQuery,window,document);
详细的代码下载见https://github.com/codetker/myWindowScroll
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关推荐
-
学习使用jquery iScroll.js移动端滚动条插件
大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下. iScroll的产生: iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上. iScroll的使用方法: iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM
-
jQuery中Nicescroll滚动条插件的用法
本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法,Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,有需要的可以了解下. Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用. Nicescroll官网地址:http://www.areaaperta.com/nicescroll/ 引入核心文件
-
jQuery Mobile开发中日期插件Mobiscroll使用说明
近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅 放在一起对比下 各位看官,你们觉得哪个
-
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
jQuery脚本: <script type="text/javascript"> $(function() { var scrollDiv = document.createElement('div'); $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body'); $(window).scroll(function() { if ($(this).scrollTop() != 0) { $('#toT
-
jQuery中ScrollTo用法示例
本文实例讲述了jQuery中ScrollTo用法.分享给大家供大家参考,具体如下: <!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"> <h
-
jQuery iScroll.js 移动端滚动条美化插件第1/5页
官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够
-
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将
-
jQuery插件windowScroll实现单屏滚动特效
回首望,曾经洋洋得意的代码现在不忍直视.曾经看起来碉堡的效果现在也能稍微弄点出来.社会在往前发展,人也不得不向前走. 参考于搜狗浏览器4.2版本首页的上下滚动效果.主要实现整个窗口的上下和左右滚动逻辑,还有很多可以拓展的空间.希望大家能多提意见与建议. 代码如下: HTML <!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-
-
jQuery插件实现文字无缝向上滚动效果代码
本文实例讲述了jQuery插件实现文字无缝向上滚动效果代码.分享给大家供大家参考,具体如下: 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
-
jQuery插件Validation表单验证详解
本文为大家分享了jQuery插件Validation表单验证的具体实现代码,供大家参考,具体内容如下 功能 1.对"姓名"的必填和长度至少是两位的验证. 2.对"电子邮件"的必填和是否为E-mail格式的验证. 3.对"网址"是否为url的验证. 4.对"你的评论"是否必填验证. 结果图 例子 <html> <head> <meta http-equiv="Content-Type&qu
-
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll.js,支持众多的参数自定义配置,scrollingSpeed:切换速度.easing:动画效果.navigation:false是否出现导航,还支持事件Callback函数调用,onLeave.afterLoad等,效果还是和不错的,浏览器兼容方面:IE8, 9, Opera 12.以及现代的浏览器,需要浏览器支持CSS3属性,推荐学习和使用. 使用方法
-
jQuery插件实现大图全屏图片相册
大图全屏图片相册jQuery插件,支持左右按钮切换以及点击大图自动切换图片,基于jQuery插件jQuery.album.js,插件支持参数自定义功能,viewMode:0没有缩略图 1有缩略图 2缩略图.全屏幕.可以对图片进行左右转,具体的参数大家可以查看jQuery.album.js文件,总之效果很不错,喜欢的朋友可学习下 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q
-
jquery插件bootstrapValidator表单验证详解
Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站. 看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用. 准备工作 BootstrapValidator文档地址:http://bv.doc.javake.cn/ 下载源码后,将其中的bootstrapValidator.min.css和bootstapVali
-
jQuery插件Skippr实现焦点图幻灯片特效
史上效果最好的焦点图幻灯片jQuery插件Skippr,轻量级插件.响应式布局插件,强大的参数自定义 配置,可自定义切换速度.切换方式.是否显示左右箭头.是否自动播放.自动播放间隔时间等配置 参数,调用插件也非常简单易用,调用方式下面介绍下: 1.加载jQuery和插件 <link rel="stylesheet" href="css/jquery.skippr.css"> <script src="js/jquery.min.js&qu
-
jquery插件star-rating.js实现星级评分特效
特效介绍 jquery星级评分插件star-rating.js下载插件,点击星星或者心的左边,就是半分,右边就是1分.点击减号,分数置为0.不兼容IE8以下的浏览器. 演示图 使用方法 第一步.引入下面的代码: 复制代码 代码如下: <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <script s
-
JQuery插件Marquee.js实现无缝滚动效果
Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果. { yScroll: "top" // 初始滚动方向 (还可以是"top" 或 "bottom") showSpeed: 850 // 初始下拉速度 scrollSpeed: 12 // 滚动速度 , pauseSpeed: 5000 // 滚动完到下一条的间隔时间 pauseOnHover: true // 鼠标滑向文字时是否停止滚动 loop: -1 // 设置循环滚动次
-
快速学习jQuery插件 Form表单插件使用方法
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields() 和 resetForm()等.