jQuery插件windowScroll实现单屏滚动特效_jquery
程序员文章站
2022-04-28 17:33:52
...
回首望,曾经洋洋得意的代码现在不忍直视。曾经看起来碉堡的效果现在也能稍微弄点出来。社会在往前发展,人也不得不向前走。
参考于搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑,还有很多可以拓展的空间。希望大家能多提意见与建议。
代码如下:
HTML
window对象滚动插件
- stage1
- stage2
- stage3
- stage4
- stage5
- page1
- page2
- page3
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 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 (distant150) { 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 (distant150) { 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 (distant150) { 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 (distant150) { 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
以上所述就是本文的全部内容了,希望大家能够喜欢。
上一篇: js中如何建立model数据模型(代码奉上,简单易懂)
下一篇: Php的Socket初步