JS's Floor Jump

Source: Internet
Author: User

Objective: To achieve the same level jumps as the major shopping sites

Requirements: Click on the ol Li, the screen slide to the corresponding UL Li Range

Idea: or use Window.scrollto (); Using the slow animation principle to realize the screen sliding

<! DOCTYPE html>{padding:0; Margin:0;} body,html{Height:100%;} ul{List-Style:none; Height:100%;} UL li{Height:100%;} ol{List-Style:none;    position:fixed;    top:80px; left:50px;}    OL li{width:50px;    height:50px; border:1px Solid #000;    Cursor:pointer; Text-Align:center; Line-height:50px;}</style>//Requirements: Click on the ol Li, the screen slide to the corresponding UL Li range//idea: or use Window.scrollto (); Using the slow animation principle to realize the screen sliding//steps://1. Get Elements//2. Specify the background color of LI in UL and OL, the corresponding Li background color is the same//3. Get the element and bind the event//using the easing animation principle to realize the screen sliding//simulate the distance from the top of the box with the scroll event//get ElementvarUL =document.getelementsbytagname ("ul") [0];varOL = document.getElementsByTagName ("ol") [0];varUlliarr =Ul.children;varOlliarr =Ol.children;vartarget = 0;varLeader =0;varTimer =NULL;//Specify the background color of LI in UL and OL, the same as the corresponding Li background color//sets an array that contains the color, and then assigns the color to the specified element in the arrayvarArrcolor = ["Pink", "blue", "yellow", "orange", "green"];//coloring elements of two arrays with a for loop for(vari = 0; i < arrcolor.length; i++) {    //ColoringUlliarr[i].style.backgroundcolor=Arrcolor[i]; Olliarr[i].style.backgroundcolor=Arrcolor[i]; //Property Binding index valueOlliarr[i].index =i; //loop binding for each Li binding point-and-click eventOlliarr[i].onclick =function(){         //Get target Location         //Get index valuetarget = ulliarr[ This. Index].offsettop; //to use the timer, first clear the timerclearinterval (timer); //using the easing animation principle to realize the screen slidingTimer = SetInterval (function(){             //Get step size             varStep = (Target-leader)/10;//Two-time processing stepStep = step>0?Math.ceil (STEP): Math.floor (step); //Screen SwipeLeader = leader+step; Window.scrollto (0, leader); //Clear Timer             if(Math.Abs (Target-leader) <=Math.Abs (STEP)) {Window.scrollto (0, Target);             Clearinterval (timer); }         },25); }}//simulate the distance from the top of the box with the scroll eventWindow.onscroll =function(){    //each time the screen slide, the screen volume to the head assigned to leader, simulation to get the distance from the top of the display areaLeader =scroll (). Top;}</script></body>

JS's Floor Jump

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.