360度旋轉圖片小特效


  現在,在這個網絡發達的時代,一些電子商務公司,需要將自己線上的產品給買家或用戶看,為了能讓用戶了解的更全面,那么把一個物件的產品要展示到方方面面,就要運用到360度旋轉圖片特效,因為上次有朋友叫我幫她弄這樣一個效果,然后結合網上的資源,就小試牛刀了,覺得還挺好玩的,效果還是可以看的吧。

  首先呢,需要在HTML文檔中引入3deye.min.js文件和jq.js,這些可以在網上下載到免費的,另外,要展示到方方面面的,就要做這件物品的各個角度的圖片,我這里是36張圖片,每10度一張圖片,好了,我就貼出代碼了,html代碼如下:

<div id="demo" class="box"></div>  

css代碼如下,其中呢div的大小應該和圖片大小相同:

<style>
  .box{width: 720px; height: 486px; margin:0 auto; cursor: pointer;}
</style>

最重要的js代碼如下:

<script>
  $(document).ready(function(){

    $("#demo").vc3dEye({
    imagePath:"img/", //圖片路徑
    totalImages:36,   //圖片張數
    imageExtension:"jpg"  //圖片擴展名
});

  });
</script>

  這樣實現的效果是每用鼠標拉一次就看到這個物品的10度角圖片,這樣呢,如果看得慢的人,可以慢慢看,另外,如果想要它自己轉動着看,這就需要加一個定時器了(html和css代碼和上相同),這里沒有引入3deye.min.js文件和jq.js,用的是js的定時器,代碼如下:

<script type="text/javascript">
  var imgUrl = document.getElementById("imgulr");
  var index = 2;
  var roateImg = setInterval(function(){
  imgUrl.src="img/" + index + ".jpg";
  index ++;
  if(index >= 37) {
    index = 1;
  }
}, 200);
</script>

這樣,自動360度效果就實現了,好了,我也是初學者,就寫到這里,有什么問題希望大家能夠指正,謝謝!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM