а√天堂资源中文在线地址bt,bbw丰满大肥奶肥婆,被喂春药蹂躏的欲仙欲死视频

Home

Web Front-end

JS Tutorial

The jQuery plug-in windowScroll implements single-screen scrolling effects_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:50 PM

jquery

Looking back, I can’t bear to look at the code that I was once proud of. It once seemed that the effect of the bunker can now be slightly achieved. Society is moving forward, and people have to move forward too.

Refer to the up and down scrolling effect of Sogou browser version 4.2 homepage. It mainly implements the up and down and left and right scrolling logic of the entire window, and there is still a lot of room for expansion. I hope you can provide more comments and suggestions.

The code is as follows:

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)插件，上下左右，可選擇是否回彈。參考搜狗歡迎頁(yè)面
 * 兼容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屬性無(wú)意義
      $(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)前頁(yè)碼
          },100);
         }else if (event.keyCode==40) {//綁定40，即向下按鈕
           getIndex();
          setTimeout(function(){
            scrollStage(windowobject,stageIndex,-1); //stageIndex為當(dāng)前頁(yè)碼
          },100);
         }
       });

       //綁定滑輪功能的函數(shù)
       function handle(delta){
         getIndex();
        if (delta<0) {
          setTimeout(function(){
            scrollStage(windowobject,stageIndex,-1); //stageIndex為當(dāng)前頁(yè)碼
          },100);
        }else{
          setTimeout(function(){
            scrollStage(windowobject,stageIndex,1); //stageIndex為當(dāng)前頁(yè)碼
          },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)到的頁(yè)面頁(yè)碼，按鍵和滾輪調(diào)用時(shí)默認(rèn)為1(傳入0)
        //dir傳入滾動(dòng)時(shí)的方向，0代表不滾動(dòng)，1代表向上，-1代表向下
        var sIndex=stIndex;//!(dir)則stageIndex為要到的頁(yè)碼，否則為當(dāng)前頁(yè)碼
        var windowobject=obj;
        var direction=0||dir; //接收參數(shù)封裝,沒有傳入時(shí)暫時(shí)認(rèn)為為0
        var target=windowHeight*sIndex; //目標(biāo)頁(yè)面距離文檔頂部距離
       
        if ( !$(windowobject).is(':animated') ) {//當(dāng)沒有在滾動(dòng)時(shí)
          if(!direction){ ////響應(yīng)guider,此時(shí)stageIndex為目標(biāo)頁(yè)面頁(yè)碼
            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)前頁(yè)面了
              });
            }else if($(window).scrollTop() == windowHeight*sIndex){ //當(dāng)前頁(yè)面時(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)前頁(yè)面
            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)前頁(yè)面頁(yè)碼(負(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)前頁(yè)距離左邊的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);

For detailed code download, please see https://github.com/codetker/myWindowScroll

The above is the entire content of this article, I hope you all like it.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress images for free

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Grass Wonder Build Guide | Uma Musume Pretty Derby

1 months ago By Jack chen

Roblox: 99 Nights In The Forest - All Badges And How To Unlock Them

4 weeks ago By DDD

Uma Musume Pretty Derby Banner Schedule (July 2025)

1 months ago By Jack chen

RimWorld Odyssey Temperature Guide for Ships and Gravtech

3 weeks ago By Jack chen

Windows Security is blank or not showing options

1 months ago By 下次還敢

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Laravel Tutorial

1601

PHP Tutorial

1502

276

Related knowledge

Detailed explanation of jQuery reference methods: Quick start guide Feb 27, 2024 pm 06:45 PM

Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded

How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ??the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

How to remove the height attribute of an element with jQuery? Feb 28, 2024 am 08:39 AM

How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element

Understand the role and application scenarios of eq in jQuery Feb 28, 2024 pm 01:15 PM

jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s

Introduction to how to add new rows to a table using jQuery Feb 29, 2024 am 08:12 AM

jQuery is a popular JavaScript library widely used in web development. During web development, it is often necessary to dynamically add new rows to tables through JavaScript. This article will introduce how to use jQuery to add new rows to a table, and provide specific code examples. First, we need to introduce the jQuery library into the HTML page. The jQuery library can be introduced in the tag through the following code:

How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

See all articles

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂