JQuery plug-in windowScroll implements single-screen scrolling effects, jquerywindowscroll

JQuery plug-in windowScroll implements single-screen scrolling effects, jquerywindowscroll

Looking back, the proud Code cannot be looked straight at now. Previously, it seems that the performance of the bunker can also be improved. Society is moving forward, and people have to move forward.

Refer to the upstream and downstream scrolling effects on the homepage of sogou browser 4.2. It mainly implements the upper and lower windows and left-side scrolling logic, and there is still much room for expansion. I hope you can give more comments and suggestions.

The Code is as follows:

HTML

<! Doctype 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"/> 
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 Rolling plug-in, which can be used to roll back up or down the page. Refer to sogou welcome page * compatible with IE, FF, Chrome and other common browsers * Reference sogou 4.2 http://ie.sogou.com/features4.2.html */; (function ($, window, document, undefined) {// define the constructor var WindowObj = function (ele, opt) {this. $ element = ele; // The outermost layer object this. ults = {'choose': 0, // The default value is up and down 'verticalspeed': 1, 'horizontalspeed': 1, 'objcontrolul': null}, this. options = $. extend ({}, this. defaults, opt); // prevents default behaviors and bubbles. Here you can define the function this is required for multiple methods. stopdefaandandbubble = fu Nction (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) {detail (elew.css ({'width': $ (window ). outerWidth () + 'px '}); // automatically determines whether the element exists and does not make sense for the css attribute assigned to undefined. Optional (elestm.children('.stage'}.css ({'width': $ (window ). outerWidth () + 'px ', 'height': $ (window ). outerHeight () + 'px '}); $ (ele ). Children('.page'}.css ({'width': $ (window ). outerWidth () + 'px ', 'height': $ (window ). outerHeight () + 'px '}) ;}// Add the method WindowObj to the constructor. prototype = {// verticalMove: function () {var obj = this. $ element; // The outermost layer object var speed = this. options. verticalSpeed; var objControl = this. options. objControlUl; // The control button 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) {// determine the webkit kernel for use in scrollTop compatibility windowobject = 'body ';} else {// supports IE and FF windowobject = 'html';} var stop = 0; // both are set to windows size this. setSize (obj); // obtain the current vertical position var stageIndex; function getIndex () {stageIndex = Math. round ($ (window ). scrollTop ()/windowHeight);} // bind the upper and lower key events on the keyboard $ (document ). keydown (function (event) {/* bind keycode38, that is, the up button */ If (event. keyCode = 38) {getIndex (); setTimeout (function () {scrollStage (windowobject, stageIndex, 1); // stageIndex indicates the current page number}, 100 );} else if (event. keyCode = 40) {// bind 40, that is, the down button getIndex (); setTimeout (function () {scrollStage (windowobject, stageIndex,-1 ); // stageIndex is the current page number}, 100) ;}); // function handle (delta) {getIndex (); if (delta <0) {setTimeout (function () {scrollStage (windowobject, stageIndex, -1); // stageIndex indicates the current page number}, 100);} else {setTimeout (function () {scrollStage (windowobject, stageIndex, 1 ); // stageIndex is the current page number}, 100) ;}// determine the pulley and solve the compatibility 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); // call the execution function} // register the event if (window. addEventListener) {window. addEventListener ('domainscroll', wheel, false);} window. onmousewheel = document. onmousewheel = wheel; // bind the scroll wheel event $ (document ). bind ('mouseunder', function (Event) {if (e. which = 2) {// which = 2 indicates the scroll wheel, that is, the middle-click this. stopdefaandandbubble (e); // The ie kernel of the bugfix sogou browser takes effect only when the timer triggers this function. setTimeout (function () {this. stopdefaandandbubble (e) ;}, 10) ;}}); // if there is a UL li control button if (objControl! = Null) {$ (objControl ). delegate ('lil', 'click', function () {stageIndex = $ (this ). index (); setTimeout (function () {scrollStage (windowobject, stageIndex, 0) ;}, 100) ;}function scrollStage (obj, stIndex, dir) {// If scrollStage = function is used, no advance is declared, then, the function cannot be found. // obj is the rolling object of the operation. // stIndex is the page number that should be rolled to when the call is clicked, when the buttons and rollers are called, the default value is 1 (0 is passed in) // dir indicates the direction when the scroll is passed in. 0 indicates that the scroll is not performed, 1 indicates that the scroll is up, and-1 indicates that the var sIndex = stIndex is downward; //! (Dir), stageIndex is the page number to be reached; otherwise, it is the current page number var windowobject = obj; var direction = 0 | dir; // The receiving parameter is encapsulated, when not passed in, it is temporarily considered as 0 var target = running wheight * sIndex; // distance from the target page to the top of the document if (! $ (Windowobject). is (': animated') {// if (! Direction) {// response guider. stageIndex indicates the target page number if ($ (window ). scrollTop ()> target) {// The content is moved down. The window is moved up, with a bullet mark (direction =-1; $ (windowobject) displayed above ). animate ({"scrollTop": target + "px"}, 1000 * speed, function () {crash_bottom (1, target, 20,150); // call the impact function, first hit the top, and the target becomes the current page});} else if ($ (window ). scrollTop () = running wheight * sIndex) {// direction = 0; crash_bottom (1, target, 20,150); // simulate hitting the bottom} else {direction = 1; $ (windo Wobject ). animate ({"scrollTop": target + "px"}, 1000 * speed, function () {crash (1, target, 20,150); // call the impact function, hit the bottom first});} else {// respond to the mouse wheel and keyboard up and down, sindex is the current page if (direction = 1) {if (sIndex = 0) {crash (1, target, 20,150);} else {// go up sIndex-= 1; $ (windowobject ). animate ({"scrollTop": Running wheight * sIndex + "px"}, 1000 * speed, function () {crash_bottom (1, running wheight * sIndex, 20,150 ); // call the impact function, flip the content up, first hit the top}) ;}} else {if (sI Ndex = listMax) {crash_bottom (1, target, 20,150);} else {// flip down sIndex + = 1; $ (windowobject ). animate ({"scrollTop": Running wheight * sIndex + "px"}, 1000 * speed, function () {crash (1, running wheight * sIndex, 20,150 ); // call the impact function, flip down the content, first hit the bottom}) ;}}}// hit the 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; // stop collision $ (windowobject ). animate ({"scrollTop": termin + "px"}, time, function () {stop = 0 ;}) ;} else if (direction = 0) {direction = 1; $ (windowobject ). animate ({"scrollTo P ": termin +" px "}, time, function () {crash_bottom (direction, termin, distant * 0.6, time ); if (distant <= 15 | time> 150) {stop = 1; // stop collision $ (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; // stop collision $ (windowobject ). animate ({"scrollTop": termin + "px"}, time, function () {stop = 0 ;}) ;} else if (direction = 0) {direction = 1; $ (windowobject ). animate ({"scrollTop": term In + "px"}, time, function () {crash (direction, termin, distant * 0.6, time); if (distant <= 15 | time> 150) {stop = 1; // stop collision $ (windowobject ). animate ({"scrollTop": termin + "px"}, time, function () {stop = 0 ;});}});}}}}, // horizontalMove: function () {var obj = this. $ element; // The outermost layer object var speed = this. options. horizontalSpeed; var objControl = this. options. objControlUl; // The control button var 1_wwidth =$ (window ). width (); var List = $ (obj ). children ('. page '); var listMax = $ (list ). length; var is_chrome = navigator. userAgent. toLowerCase (). indexOf ('chrome ')>-1; if (is_chrome) {// determine the webkit kernel for use in scrollTop compatibility windowobject = 'body ';} else {// supports IE and FF windowobject = 'html';} var stop = 0; // both are set to windows size this. setSize (obj); values (obj).css ({'width': descriwwidth * listMax + 'px'}); var pageIndex; // the current page number (negative number) function getPageIndex () {pageIndex = Math. rou Nd(parseint(((objects (obj).css ("margin-left")/javaswwidth);} // bind the left and right buttons on the keyboard event $ (document ). keydown (function (event) {// judge event. the keyCode is 39 (that is, the right button) if (event. keyCode = 39) {getPageIndex (); scrollPage ($ (obj), pageIndex,-1) ;}// judge the event. the keyCode is 37 (that is, the left button else if (event. keyCode = 37) {getPageIndex (); scrollPage ($ (obj), pageIndex, 1) ;}}); // if there is a UL li control button if (objControl! = Null) {$ (objControl ). delegate ('lil', '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 distction math.round(parseint((obj).css ("margin-left "))); // The current page is located at the left of the margin (negative value) var aim = pageIndex * 1_wwidth * (-1); if (! $ (Windowobject). is (": animated") {if (! Direction) {// response nav if (dist! = Aim) {// pageIndex is yearID. non-negative value $ (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 {// response keyboard left and right keys if (direction = 1) {// pageIndex is negative if (pageIndex = 0) {$ (windowobject ). animate ({"margin-left": "+ =" + "50px"}, 500 ). animate ({"margin-left": "-=" + "100px"}, 500 ). animate ({"margin-left": "+ =" + "50px"}, 500);} else {pageIndex + = 1; // display the content on the left, left click $ (windowobject ). animate ({"margin-left": "+ =" + expires wwidth + "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": "-=" + expires wwidth + "px"}, 1000 * speed );}}}}}}} // The method for using the windowObj object in the plug-in. 0 is vertical, and 1 is horizontal $. fn. windowScroll = function (options) {// create an object var windowObj = new WindowObj (this, options); // call the method if (windowObj. options. choose = 0) {return windowObj. verticalMove ();} else if (windowObj. options. choose = 1) {return windowObj. horizontalMove ();} Keep extension after else {// 2 // add some functions }}) (jQuery, window, document );
For detailed code download see https://github.com/codetker/myWindowScroll
The above is all the content of this article. I hope you will like it.