jQuery插件windowScroll實現(xiàn)單屏滾動特效
更新時間：2015年07月14日 09:37:28 投稿：hebedich
本文給大家分享的是一個使用jQuery插件windowScroll實現(xiàn)的單屏滾動的特效，主要參考搜狗瀏覽器4.2版本首頁的上下滾動效果。主要實現(xiàn)整個窗口的上下和左右滾動邏輯，非常的實用。
回首望，曾經(jīng)洋洋得意的代碼現(xiàn)在不忍直視。曾經(jīng)看起來碉堡的效果現(xiàn)在也能稍微弄點出來。社會在往前發(fā)展，人也不得不向前走。
參考于搜狗瀏覽器4.2版本首頁的上下滾動效果。主要實現(xiàn)整個窗口的上下和左右滾動邏輯，還有很多可以拓展的空間。希望大家能多提意見與建議。
代碼如下:
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){
//定義構(gòu)造函數(shù)
var WindowObj=function(ele,opt){
this.$element=ele; //最外層對象
this.defaults={
'choose' : 0,//默認(rèn)為上下
'verticalSpeed' : 1,
'horizontalSpeed' : 1,
'objControlUl': null
},
this.options=$.extend({},this.defaults,opt );
//阻止默認(rèn)行為和冒泡,這里可以定義多個方法都要用到的函數(shù)
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'
});
}
}
//給構(gòu)造函數(shù)添加方法
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內(nèi)核，供scrollTop兼容性使用
windowobject='body';
}else{
//支持IE和FF
windowobject='html';
}
var stop=0;
//均設(shè)置為windows大小
this.setSize(obj);
//得到當(dāng)前的垂直位置
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為當(dāng)前頁碼
},100);
}else if (event.keyCode==40) {//綁定40，即向下按鈕
getIndex();
setTimeout(function(){
scrollStage(windowobject,stageIndex,-1); //stageIndex為當(dāng)前頁碼
},100);
}
});
//綁定滑輪功能的函數(shù)
function handle(delta){
getIndex();
if (delta<0) {
setTimeout(function(){
scrollStage(windowobject,stageIndex,-1); //stageIndex為當(dāng)前頁碼
},100);
}else{
setTimeout(function(){
scrollStage(windowobject,stageIndex,1); //stageIndex為當(dāng)前頁碼
},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); //調(diào)用執(zhí)行函數(shù)
}
//注冊事件
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
//綁定鼠標(biāo)滾輪事件
$(document).bind('mousedown', function(event) {
if (e.which==2) {//which=2代表鼠標(biāo)滾輪,即為中鍵
this.stopDefaultAndBubble(e);
//bugfix 搜狗瀏覽器的ie內(nèi)核只有在定時器觸發(fā)這個函數(shù)才生效
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來指定的話沒有聲明提前，然后就會找不到這個函數(shù)了
//obj為操作滾動的對象
//stIndex為點擊調(diào)用時應(yīng)該滾動到的頁面頁碼，按鍵和滾輪調(diào)用時默認(rèn)為1(傳入0)
//dir傳入滾動時的方向，0代表不滾動，1代表向上，-1代表向下
var sIndex=stIndex;//!(dir)則stageIndex為要到的頁碼，否則為當(dāng)前頁碼
var windowobject=obj;
var direction=0||dir; //接收參數(shù)封裝,沒有傳入時暫時認(rèn)為為0
var target=windowHeight*sIndex; //目標(biāo)頁面距離文檔頂部距離
if ( !$(windowobject).is(':animated') ) {//當(dāng)沒有在滾動時
if(!direction){ ////響應(yīng)guider,此時stageIndex為目標(biāo)頁面頁碼
if ($(window).scrollTop() > target) { //內(nèi)容下移，窗口上移,上方出現(xiàn)彈痕
direction=-1;
$(windowobject).animate({
"scrollTop": target +"px"
},1000*speed,function(){
crash_bottom(1,target,20,150); //調(diào)用撞擊函數(shù),先撞頂部,target變成當(dāng)前頁面了
});
}else if($(window).scrollTop() == windowHeight*sIndex){ //當(dāng)前頁面時
direction=0;
crash_bottom(1, target ,20,150); //模擬撞底部
}else{
direction=1;
$(windowobject).animate({
"scrollTop": target +"px"
},1000*speed,function(){
crash(1,target,20,150); //調(diào)用撞擊函數(shù),先撞底部
});
}
}else{//響應(yīng)鼠標(biāo)滾輪和鍵盤上下，sindex為當(dāng)前頁面
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); //調(diào)用撞擊函數(shù),往下翻內(nèi)容往上，先撞頂部
}
);
}
}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); //調(diào)用撞擊函數(shù),往上翻內(nèi)容往下，先撞底部
});
}
}
}
}
}
//撞擊函數(shù)
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內(nèi)核，供scrollTop兼容性使用
windowobject='body';
}else{
//支持IE和FF
windowobject='html';
}
var stop=0;
//均設(shè)置為windows大小
this.setSize(obj);
$(obj).css({'width':windowWidth*listMax+'px'});
var pageIndex; //當(dāng)前頁面頁碼(負(fù)數(shù))
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"))); //當(dāng)前頁距離左邊的margin(負(fù)值)
var aim=pageIndex*windowWidth*(-1);
if (!$(windowobject).is(":animated")) {
if(!direction){ //響應(yīng)nav
if (dist != aim) { //此時pageIndex為yearID.非負(fù)值
$(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{ //響應(yīng)鍵盤左右鍵
if(direction==1){ //pageIndex為負(fù)值
if(pageIndex==0){
$(windowobject).animate({"margin-left":"+="+"50px"},500).animate({"margin-left":"-="+"100px"},500).animate({"margin-left":"+="+"50px"},500);
}else{
pageIndex+=1; //顯示左邊內(nèi)容，左鍵
$(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){
//創(chuàng)建實體
var windowObj=new WindowObj(this,options);
//根據(jù)選擇調(diào)用方法
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);
詳細(xì)的代碼下載見https://github.com/codetker/myWindowScroll
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
jQuery對底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實例代碼
這篇文章主要介紹了jQuery對底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
jQuery EasyUI Tab 選項卡問題小結(jié)
這篇文章主要介紹了jQuery EasyUI Tab 選項卡問題小結(jié),在項目開發(fā)階段很多朋友都遇到過此問題，其實解決辦法很簡單的，下面小編給大家分享下問題原因及解決辦法，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了JS與jQuery實現(xiàn)隔行變色的方法,結(jié)合實例形式對比分析了javascript與jQuery實現(xiàn)隔行變色的具體操作步驟與相關(guān)技巧,體驗一下jQuery的華麗與簡潔,需要的朋友可以參考下2016-09-09
今天在修整博客側(cè)欄信息時，利用到了Tab選項卡方式，因為ZBlog封裝的是JQuery庫，所以很自然地就想到了IdTabs。2010-09-09
Jquery Easyui驗證組件ValidateBox使用詳解（20）
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui自定義下拉框組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
首先聲明這2個無刷新級聯(lián)下拉框的jquery插件完全是自己原創(chuàng)的，經(jīng)過嚴(yán)格的測試，正確使用不會出現(xiàn)bug2011-10-10
EasyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實現(xiàn)代碼
今天做項目的時候，想在easyui的datagrid每一列數(shù)據(jù)后邊都加上一個操作按鈕，怎么實現(xiàn)此功能呢？下面小編給大家?guī)砹薊asyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實現(xiàn)代碼，需要的朋友參考下吧2017-08-08
jquery.boxy插件的iframe擴展2010-07-07
本篇文章主要是對jquery實現(xiàn)點擊彈出層效果的簡單實例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
本文主要介紹jQueryUI DatePicker添加時分秒的方法，簡單實用，需要的朋友可以參考下。2016-06-06