Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">Html, body {width: 100%; height: 100%; border: 0px; margin: 0px; overflow: hidden ;}# menu {width: 1000px; height: 500px; overflow: hidden; background: lightblue ;}. page {position: absolute; width: 300px; height: 400px; left: 350px; top: 50px; background: # FFF; border: 1px solid #999 ;} ul {list-style: none; height: 320px; margin: 20px; padding: 0px; background: # EEE ;}li {font-size: 12px; height: 20px; line-height: 20px; border-bottom: 1px dashed #999;} li span {float: right;} li a {color: #000; text-decoration: none ;} li a: hover {text-decoration: underline ;}. tip {display: block; height: 20px; margin: 0px 20px; line-height: 20px; text-align: center; font-size: 12px; background: #999 ;}</style><script type="text/javascript">Function id (obj) {return document. getElementById (obj);} var page; var mx; var md = false; var sh = 0; var en = false; window. onload = function () {page = id ("menu "). getElementsByTagName ("div"); if (page. length> 0) {page [0]. style. zIndex = 2;} for (I = 0; I<page.length;i++){page[i].innerHTML+=""+(i+1)+"/"+page.length+"页 拖拽翻页";page[i].id="page"+i;page[i].i=i;page[i].onmousedown=function(e){if(!en){if(!e){e=e||window.event;}ex=e.pageX?e.pageX:e.x;mx=350-ex;this.style.cursor="move";md=true;if(document.all){this.setCapture();}else{window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}}}page[i].onmousemove=function(e){if(md){en=true;if(!e){e=e||window.event;}ex=e.pageX?e.pageX:e.x;this.style.left=ex+mx+"px";if(this.offsetLeft<350){var cu=(this.i==0)?page.length-1:this.i-1;page[sh].style.zIndex=0;page[cu].style.zIndex=1;this.style.zIndex=2;sh=cu;}if(this.offsetLeft>(350) {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 (this. offsetLeft = 350) {en = false;} if (document. all) {this. releaseCapture ();} else {window. releaseEvents (Event. MOUSEMOVE | Event. MOUSEUP) ;}flyout (this) ;}} function flyout (obj) {if (obj. offsetLeft <350) {if (obj. offsetLeft-10)> 50) {obj. style. left = obj. offsetLeft-10 + "px"; window. setTimeout ("flyout (id ('" + obj. id + "');", 0);} else {obj. style. left = 50 + "px"; obj. style. zIndex = 0; flyin (id (obj. id) ;}} if (obj. offsetLeft> 350) {if (obj. offsetLeft + 10) <650) {obj. style. left = obj. offsetLeft + 10 + "px"; window. setTimeout ("flyout (id ('" + obj. id + "');", 0);} else {obj. style. left = 650 + "px"; obj. style. zIndex = 0; flyin (id (obj. id) ;}} function flyin (obj) {if (obj. offsetLeft <350) {if (obj. offsetLeft + 10) <350) {obj. style. left = obj. offsetLeft + 10 + "px"; window. setTimeout ("flyin (id ('" + obj. id + "');", 0);} else {obj. style. left = 350 + "px"; en = false ;}} if (obj. offsetLeft> 350) {if (obj. offsetLeft-10)> 350) {obj. style. left = obj. offsetLeft-10 + "px"; window. setTimeout ("flyin (id ('" + obj. id + "');", 0);} else {obj. style. left = 350 + "px"; en = false ;}}}</script></head><body><!--把下面代码加到<body>与</body>之间--><div id="menu"><div class="page"><ul><li>Partner</li><li>Beautiful Island</li><li >Dancing Girl</li><li>Hand in Hand</li><li>First-year family</li></ul></div><div class="page"><ul><li>-11-25 webpage creation tutorial</li><li>-11-25 Network</li><li>Qingcheng rain</li><li>2000-11-25 past events</li><li>09-11-25 green terrorists</li></ul></div><div class="page"><ul><li>09-11-25 time is slowly disappearing</li><li>Quiet Hot Springs</li><li>-11-25 days of flowers</li><li>09-11-25 a Hui gave a dog</li><li>False</li><li>South Taiwan Wan Chai total</li></ul></div></div></body></html>
Tip: you can modify some code before running
