jQuery插件windowScroll實(shí)現(xiàn)單屏滾動(dòng)特效
更新時(shí)間：2015年07月14日 09:37:28 投稿：hebedich
本文給大家分享的是一個(gè)使用jQuery插件windowScroll實(shí)現(xiàn)的單屏滾動(dòng)的特效，主要參考搜狗瀏覽器4.2版本首頁的上下滾動(dòng)效果。主要實(shí)現(xiàn)整個(gè)窗口的上下和左右滾動(dòng)邏輯，非常的實(shí)用。
回首望，曾經(jīng)洋洋得意的代碼現(xiàn)在不忍直視。曾經(jīng)看起來碉堡的效果現(xiàn)在也能稍微弄點(diǎn)出來。社會(huì)在往前發(fā)展，人也不得不向前走。
參考于搜狗瀏覽器4.2版本首頁的上下滾動(dòng)效果。主要實(shí)現(xiàn)整個(gè)窗口的上下和左右滾動(dòng)邏輯，還有很多可以拓展的空間。希望大家能多提意見與建議。
代碼如下:
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對(duì)象滾動(dòng)插件</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, //控制垂直滾動(dòng)速度
'horizontalSpeed' : 1,
'objControlUl': '.wrap .stageControl'
});
$(".stage1").windowScroll({
'choose': 1,
'verticalSpeed' : 1,
'horizontalSpeed' : 1,//控制水平滾動(dòng)速度
'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滾動(dòng)插件，上下左右，可選擇是否回彈。參考搜狗歡迎頁面
* 兼容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; //最外層對(duì)象
this.defaults={
'choose' : 0,//默認(rèn)為上下
'verticalSpeed' : 1,
'horizontalSpeed' : 1,
'objControlUl': null
},
this.options=$.extend({},this.defaults,opt );
//阻止默認(rèn)行為和冒泡,這里可以定義多個(gè)方法都要用到的函數(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'
});
//自動(dòng)判斷元素是否存在，對(duì)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={
//上下滾動(dòng)的方法
verticalMove:function(){
var obj=this.$element; //最外層對(duì)象
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ù)
}
//注冊(cè)事件
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)核只有在定時(shí)器觸發(fā)這個(gè)函數(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來指定的話沒有聲明提前，然后就會(huì)找不到這個(gè)函數(shù)了
//obj為操作滾動(dòng)的對(duì)象
//stIndex為點(diǎn)擊調(diào)用時(shí)應(yīng)該滾動(dòng)到的頁面頁碼，按鍵和滾輪調(diào)用時(shí)默認(rèn)為1(傳入0)
//dir傳入滾動(dòng)時(shí)的方向，0代表不滾動(dòng)，1代表向上，-1代表向下
var sIndex=stIndex;//!(dir)則stageIndex為要到的頁碼，否則為當(dāng)前頁碼
var windowobject=obj;
var direction=0||dir; //接收參數(shù)封裝,沒有傳入時(shí)暫時(shí)認(rèn)為為0
var target=windowHeight*sIndex; //目標(biāo)頁面距離文檔頂部距離
if ( !$(windowobject).is(':animated') ) {//當(dāng)沒有在滾動(dòng)時(shí)
if(!direction){ ////響應(yīng)guider,此時(shí)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)前頁面時(shí)
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;
});
}
});
}
}
}
},
//左右滾動(dòng)的方法
horizontalMove:function(){
var obj=this.$element; //最外層對(duì)象
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) { //此時(shí)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對(duì)象的方法，0為vertical，1為horizontal
$.fn.windowScroll=function(options){
//創(chuàng)建實(shí)體
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之后的留擴(kuò)展吧
//add some functions
}
}
})(jQuery,window,document);
詳細(xì)的代碼下載見https://github.com/codetker/myWindowScroll
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
相關(guān)文章
本文主要對(duì)handlebars+require基本使用方法進(jìn)行詳細(xì)介紹，文章尾部會(huì)附上完整代碼供大家參考。需要的朋友一起來看下吧2016-12-12
基于input動(dòng)態(tài)模糊查詢的實(shí)現(xiàn)方法
下面小編就為大家分享一篇基于input動(dòng)態(tài)模糊查詢的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
jquery實(shí)現(xiàn)簡(jiǎn)易的移動(dòng)端驗(yàn)證表單
本文給大家匯總介紹了幾個(gè)常用的jquery實(shí)現(xiàn)簡(jiǎn)易的移動(dòng)端驗(yàn)證表單，非常的實(shí)用，有需要的小伙伴可以進(jìn)來參考下。2015-11-11
jQuery使用手冊(cè)之三 CSS操作...2007-03-03
如何解決jQuery EasyUI 已打開Tab重新加載問題
最近在項(xiàng)目中遇到這樣的需求，要求實(shí)現(xiàn)點(diǎn)擊左側(cè)已經(jīng)打開的tab可以刷新重新加載datagrid。下面給大家分享實(shí)現(xiàn)代碼，一起看看吧2016-12-12
js之ActiveX控件使用說明 new ActiveXObject()
ActiveX 控件廣泛用于Internet。它們可以通過提供視頻、動(dòng)畫內(nèi)容等來增加瀏覽的樂趣。不過，這些程序可能出問題或者向您提供不需要的內(nèi)容2014-03-03
精心挑選的15款優(yōu)秀jQuery 本特效插件和教程
今天這篇文章向大家分享15款精心挑選的優(yōu)秀 jQuery 文本特效插件，都帶有詳細(xì)的使用教程。jQuery 是最流行和使用最廣泛的 JavaScript 框架，它簡(jiǎn)化了 HTML 文檔遍歷，事件處理，動(dòng)畫以及Ajax交互，幫助 Web 開發(fā)人員更快速的實(shí)現(xiàn)各種精美的界面效果2012-08-08
jquery實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能示例分享
這篇文章主要介紹了jquery實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能，大家參考使用吧2014-02-02
jquery文字填寫自動(dòng)高度的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query文字填寫自動(dòng)高度的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
jquery ajax post提交數(shù)據(jù)亂碼
今天發(fā)現(xiàn)在使用jquery ajax.post提交數(shù)據(jù)時(shí)會(huì)發(fā)現(xiàn)數(shù)據(jù)在ff正常，但在chrome與ie瀏覽器中post過去的數(shù)據(jù)全部是亂碼2013-11-11