//---------use Z-index and complex time control to complete the function of the photo book, compatible with the major browsers
----Test Results-----Do not know why after switching to IE has become particularly slow to move, it may be the problem of rendering
1<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>5<title>photoAlbum</title>67<style type= "Text/css" >8 #box {width:600px;height:300px;overflow:hidden;left:350px;top:100px;position:absolute;}9 Img{width:500px;height:300px;position:absolute;}TenSpan{height:300px;width:20px;position:absolute;background: #BBB; z-index:3;} One</style> A<script type= "Text/javascript" > -Window.onload=function(){ - varcolor=["#ABC", "#BCD", "#CDE", "#DEF", "#789", "#456"]; the vartimer; - varOrder=-1; - varIspeed=0; - varFlag=0; + varSnapcount=0; -Odiv=document.getelementbyid (' album '); +Oimg=document.getelementsbytagname (' img '); AOspan=document.getelementsbytagname (' span '); atOimg[0].style.zindex=1; - functionhoming (offset) { -oimg[order+1].style.left=odiv.offsetleft+order*20+20+offset+ ' px '; -ospan[order].style.left=odiv.offsetleft+order*20+offset+ ' px '; - } - functionMove () { in if((ospan[order].offsetleft>=order*20+odiv.offsetleft&&ispeed<0) | | (ospan[order].offsetleft<=order*20+500+odiv.offsetleft&&ispeed>0)){ -Oimg[order+1].style.left=oimg[order+1].offsetleft+ispeed+ ' px '; toOspan[order].style.left=ospan[order].offsetleft+ispeed+ ' px '; + } - Else{ the if(ispeed<0) Homing (0); * Else if(ispeed>0) Homing (500); $ clearinterval (timer);Panax NotoginsengFlag=1; - } the } + for(count=0;count<ospan.length;count++){ Aospan[count].style.left=odiv.offsetleft+500+count*20+ ' px '; theOspan[count].style.backgroundcolor=Color[count]; +ospan[count].index=count; -Ospan[count].onmouseover=function(){ $ if( This. index==order) { $ if(flag==0)return false; - Elseispeed=-Ispeed; - } the Else if( This.index>order) { -Ispeed=-4;Wuyioimg[ This. index+1].style.left=odiv.offsetleft+520+ This. index*20+ ' px '; the if(order!=-1) Homing (0); - } Wu Else { -Ispeed=4; Aboutoimg[ This. index+1].style.left=odiv.offsetleft+20+ This. index*20+ ' px '; $Homing (500); - } -Flag=0; - clearinterval (timer); A for(snapcount=0;snapcount<oimg.length;snapcount++) {oimg[snapcount].style.zindex=0;} +Order= This. Index; theoimg[ This. index].style.zindex=1; -oimg[ This. index+1].style.zindex=2; $ for(snapcount=0;snapcount< This. index;snapcount++) ospan[snapcount].style.left=snapcount*20+odiv.offsetleft+ ' px '; the for(snapcount++;snapcount<ospan.length;snapcount++) ospan[snapcount].style.left=snapcount*20+odiv.offsetleft+ "PX"; theTimer=setinterval (function() {move ();},10); the } the } - } in</script> the<body> the<div id= "box" > About<div id= "album" > the the the + - theBayi<span> Photo One </span> the<span> Photos Two </span> the<span> Photo III </span> -<span> Photos Four </span> -<span> Photos Five </span> the</div> the</div> the</body> theDay10-------PhotoAlbum
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
