Javascript implements cool drag paging _ javascript skills

Source: Internet
Author: User
The cool javascript drag paging function enables seamless loop paging. you can drag the mouse to complete the paging. drag the mouse to the left to return to the previous page. drag the right to open the second page with animation effects, it is really good. The interface is black and non-mainstream. I believe many people will like it. Javascript implements cool drag paging

Js

Drag pages
 Script function id (obj) {return document. getElementById (obj);} var page; var lm, mx; var md = false; var sh = 0; var en = false; window. onload = function () {page = document. getElementsByTagName ("p"); if (page. length> 0) {page [0]. style. zIndex = 2;} for (I = 0; I
 
  
75) {var cu = (this. I = page. length-1 )? 0: this. I + 1; page [sh]. style. zIndex = 0; page [cu]. style. zIndex = 1; this. style. zIndex = 2; sh = cu ;}} page [I]. onmouseup = function () {this. style. cursor = "default"; md = false; if (document. all) {this. releaseCapture ();} else {window. releaseEvents (Event. MOUSEMOVE | Event. MOUSEUP) ;}flyout (this) ;}} function flyout (obj) {if (obj. offsetLeft <75) {if (obj. offsetLeft + 350-20)>-275) {obj. style. left = obj. offsetLeft + 350-20; window. setTimeout ("flyout (id ('" + obj. id + "');", 0);} else {obj. style. left =-275; obj. style. zIndex = 0; flyin (id (obj. id) ;}} if (obj. offsetLeft> 75) {if (obj. offsetLeft + 350 + 20) <1125) {obj. style. left = obj. offsetLeft + 350 + 20; window. setTimeout ("flyout (id ('" + obj. id + "');", 0);} else {obj. style. left = 1125; obj. style. zIndex = 0; flyin (id (obj. id) ;}} function flyin (obj) {if (obj. offsetLeft <75) {if (obj. offsetLeft + 350 + 20) <425) {obj. style. left = obj. offsetLeft + 350 + 20; window. setTimeout ("flyin (id ('" + obj. id + "');", 0);} else {obj. style. left = 425; en = false ;}} if (obj. offsetLeft> 75) {if (obj. offsetLeft + 350-20)> 425) {obj. style. left = obj. offsetLeft + 350-20; window. setTimeout ("flyin (id ('" + obj. id + "');", 0);} else {obj. style. left = 425; en = false; }}} script
 

Html:

  • Pearl of the Orient
  • ! Lover
  • Quiet hot spring
  • What you look like
  • Love song 1980
  • Love song 1980
  • Love song 2000
  • Orphan of Asia Pacific
  • Childhood

  • Pearl of the Orient
  • -
  • Homesickness
  • Pass through your black hair my hand

  • Song of war
  • Yellow Face
  • Taipei Red Rose

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

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.