首页>>Jquery图片>>360度产品展示,js+图片(2014-06-28)

360度产品展示,js+图片

图片是37张，路径在下面的代码里面，index从1到37，相当于每10度一张图片.

360度产品展示,js+图片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="threesixty" image_count='37' path_pattern='http://www.vivo.com.cn/vivo/xplay3s/360/img-white/white#index#.jpg' end_frame='74' scale='1' fix_width='400' fix_height='400' max_width='400' max_height='400'>  
  2.     <em class="loading"><p>0%</p></em>.  
  3.     <ol></ol>  
  4. </div>  
 
CSS Code
  1. #threesixty{position:absolute;overflow:hidden;top:70px;left:0;width:100%;height:100%; }  
  2. #threesixty ol{display: none;}  
  3. #threesixty img{position:absolute;top:0;width:100%;height:auto;}  
  4. .current-image{visibility:visible;width:100%;}  
  5. .previous-image{visibility:hidden;width:0;}  
  6. #threesixty .loading{position:absolute;left:50%;top:50%;width:90px;height:90px;margin-left:-45px;margin-top:-50px;display:none;}  
  7. #threesixty .loading span{position:absolute;top:50%;width:100%;color:#333;font-size:12px;font-family:Arial, Verdana, sans;text-align:center;line-height:1em;margin-top:-0.5em;}  
  8. #threesixty em.loading{width:55px;padding:40px 0 0 0;display:block;position:absolute;top:50%;left:50%;margin:-27px 0 0 -27px;background:url(images/loading-ico.gif) no-repeat 10px 0;z-index:999999;text-align:center;font-size:12px;color:#219edf;font-family:Arial;font-style:normal;}  
 

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_355.html