1.前言

做過(guò)電商的朋友應(yīng)該比較熟悉，當(dāng)我們?cè)诮榻B一個(gè)實(shí)體產(chǎn)品的時(shí)候必不可少的會(huì)有這個(gè)產(chǎn)品的圖片，這是用戶對(duì)這個(gè)產(chǎn)品的最直觀了解，從以前的包括現(xiàn)在的電商網(wǎng)站來(lái)看，產(chǎn)品詳情頁(yè)里面產(chǎn)品的圖片一般都是占一大部分，而且一般的排版方式都是圖片從上往下排來(lái)展示產(chǎn)品的各個(gè)角度的圖片或者使用輪播圖（參照淘寶京東等），因?yàn)檫@個(gè)是最簡(jiǎn)單的能使用戶仔細(xì)了解產(chǎn)品的外觀的方法，所以目前幾乎所有的電商都會(huì)加入這個(gè)環(huán)節(jié)。當(dāng)然我們?cè)谶@里并不是為了替換掉這種展示方式，而是我們?cè)黾右粋€(gè)能讓用戶更方便去了解產(chǎn)品實(shí)際全貌的方式，而且在排版上做到只占一張圖片的位置。我們先來(lái)看看360度旋轉(zhuǎn)產(chǎn)品是怎么樣的效果

2.前期工作

好了，大家可能會(huì)問(wèn)，像這種圖片是怎么拍的呢？這個(gè)是攝影師從產(chǎn)品的各個(gè)角度拍攝的，需要搭建一定的拍攝環(huán)境，而且每個(gè)角度的度數(shù)的一樣的，應(yīng)該是使用了旋轉(zhuǎn)托盤(pán)。我們?cè)谶@里就不仔細(xì)解釋拍攝過(guò)程了，有興趣的朋友可以自己去查查資料，我們?cè)谶@里講的是前端的效果實(shí)現(xiàn)

3.HTML代碼結(jié)構(gòu)

一般使用插件來(lái)講，第一，我們希望HTML代碼越少越好，第二，可以增加一些配置項(xiàng)，第三，很簡(jiǎn)單的使用方式。這個(gè)插件來(lái)講是非常簡(jiǎn)單的，所以HTML代碼只需一行

<div id="3dplayer" class='proPlayer_container' data-width='550' data-height='400' data-path='https://img.ingping.com/images/pro_3dImgs/320/6198/'></div>

這行html代碼是一個(gè)容器，是屬于最外層的，class里面的類是控制排版樣式的，data-width,data-height是設(shè)置圖片畫(huà)布大小的，data-path是23張圖片的的圖片路徑，我們這里的圖片命名是從1到23來(lái)命名的，比如1.jpg  2.jpg 3.jpg......這個(gè)路徑是文件夾路徑

4.JavaScript代碼

大家可以放大來(lái)看這張圖，此插件代碼共有三個(gè)對(duì)象：proPlayer , proImg , controlPanel

proPlayer是主對(duì)象，也可以理解為代碼用從這個(gè)對(duì)象開(kāi)始運(yùn)行的。

proImg是產(chǎn)品圖片對(duì)象，用來(lái)加載23張圖片

controlPanel是控制面板，可以理解為用戶在交互的那一層

我們逐一從各個(gè)對(duì)象來(lái)開(kāi)始介紹，不過(guò)首先我們先檢測(cè)用戶的設(shè)備是電腦還是移動(dòng)端，這個(gè)對(duì)于我們事件操作有很大關(guān)系，因?yàn)樵趈s中電腦和移動(dòng)端的事件對(duì)象是不一樣的。

//detect events var hasTouch = 'ontouchstart' in window, startEvent = hasTouch ? 'touchstart' : 'mousedown', moveEvent = hasTouch ? 'touchmove' : 'mousemove', endEvent = hasTouch ? 'touchend' : 'mouseup', cancelEvent = hasTouch ? 'touchcancel' : 'mouseup';

proPlayer對(duì)象屬性：

var proPlayer = {}; proPlayer.id = '3dplayer'; proPlayer.canvasIndex=1; //畫(huà)布索引 proPlayer.debug = false; proPlayer.width=500; proPlayer.height=333; proPlayer.banner = '';

proPlayer對(duì)象的方法：

proPlayer.load = function(){ proPlayer.init_debug(); //set banner var banner = '<div><img src="'+proPlayer.banner+'" alt=""></div>'; $('#'+proPlayer.id).before(banner); //set attr proPlayer.width = $('#'+proPlayer.id).attr('data-width'); proPlayer.height = $('#'+proPlayer.id).attr('data-height'); //24張圖片路徑 proImg.path = $('#'+proPlayer.id).attr('data-path'); // preload images proImg.preloadImages(function(index,isCompleted){ if(isCompleted){ //showTip('yes') proPlayer.init(); }else{ //showTip(index); } }); }

這個(gè)方法是代碼首次運(yùn)行時(shí)執(zhí)行的，從寫(xiě)的來(lái)看，這段代碼的作用是獲取設(shè)置的寬高，路徑，和加載圖片，之后加載完后進(jìn)行初始化 proPlayer.init()

代碼初始化

//player init on image loaded proPlayer.init = function(){ proPlayer.createControlPanel(); //detect mouse event controlPanel.setControlPanel(); //create Images canvas proPlayer.createCanvas(); //show first image $('#3dplayer_1').show(); proPlayer.rotate(); }

從代碼可以看到，首先創(chuàng)造出控制面板，設(shè)置控制面板的事件監(jiān)聽(tīng)，將圖片畫(huà)到畫(huà)布上，我們來(lái)看看這些方法的詳細(xì)代碼

proPlayer.createControlPanel();

proPlayer.createControlPanel=function(){ var panel = '<canvas id="d3player_0" width="'+proPlayer.width+'" height="'+proPlayer.height+'" style="z-index:99"></canvas>' $('#'+proPlayer.id).prepend(panel) }

controlPanel.setControlPanel();

controlPanel.setControlPanel=function(){ var canvas = document.getElementById('d3player_0'); document.addEventListener(startEvent, function(){ controlPanel.mousedown = true; //showTip('mousedown'); },false) document.addEventListener(endEvent, function(){ controlPanel.mousedown = false; //showTip('mouseup'); }) canvas.addEventListener(moveEvent, function (e) { if(controlPanel.mousedown){ var x = e.clientX || e.touches[0].screenX; var preX = controlPanel.preX; //showTip(preX+':'+x); //大于5才移動(dòng) if(Math.abs(x-preX)>=controlPanel.speed){ controlPanel.callPlayer(preX,x); controlPanel.preX = x; } } }, false); }

上述方法也是這個(gè)插件的核心之一了，監(jiān)聽(tīng)事件，然后改變控制面板的屬性的值從而觸發(fā)對(duì)應(yīng)的canvas顯示隱藏

proPlayer.createCanvas();

proPlayer.createCanvas = function(){ //create canvas from img for(var i=1;i<=proImg.count;i++){ var canvas_id = "3dplayer_"+i var canvas_str = '<canvas id="'+canvas_id+'" style="display: none;" width="'+proPlayer.width+'" height="'+proPlayer.height+'"></canvas>'; $('#'+proPlayer.id).append(canvas_str); var canvas = document.getElementById(canvas_id); var context = canvas.getContext('2d'); var imageObj = proImg.list[i]; context.drawImage(imageObj, 0, 0,imageObj.width,imageObj.height,0,0,canvas.width,canvas.height); } }

將23張圖片按照順序循環(huán)畫(huà)到每個(gè)畫(huà)布上，插入到DOM中

好了，我們先回到controlPanel.setControlPanel()，我們看到最后一個(gè)監(jiān)聽(tīng)事件，保存鼠標(biāo)或者觸摸事件的坐標(biāo)對(duì)象，保存當(dāng)前坐標(biāo)再和上一個(gè)坐標(biāo)作差的絕對(duì)值進(jìn)行和speed對(duì)比（speed是可以設(shè)置的變量，可以控制我們旋轉(zhuǎn)時(shí)的敏感度，也可以說(shuō)旋轉(zhuǎn)快慢吧）

之后我們判斷是向左還是向右旋轉(zhuǎn)

controlPanel.callPlayer = function(preX,currX){ if(preX > currX) proPlayer.turnLeft(); else proPlayer.turnRight(); }

向左或向右判斷代碼

proPlayer.turn = function(turn){ var turn = turn; //一開(kāi)始proPlayer.canvasIndex == 1 var index = proPlayer.canvasIndex; if(turn){ index--; if(index<1) index=23; }else{ index++; if(index>23) index=1; } return index; } proPlayer.turnLeft=function(){ var index = proPlayer.turn(false); proPlayer.show(index); } proPlayer.turnRight=function(){ var index = proPlayer.turn(true); proPlayer.show(index); }

proPlayer.show() 顯示當(dāng)前畫(huà)布的前或后一張圖

proPlayer.show = function(index){ var preIndex = proPlayer.canvasIndex; var currIndex = index; $('#3dplayer_'+currIndex).show(); $('#3dplayer_'+preIndex).hide(); proPlayer.canvasIndex = index; }

好了，目前該插件的大部分代碼都出現(xiàn)了，還是比較簡(jiǎn)單的，比較精簡(jiǎn)，而且可拓展，需要增加新功能直接在對(duì)象里面增加屬性或者方法就可以了，比如我們想當(dāng)圖片加載完成后讓畫(huà)布自動(dòng)旋轉(zhuǎn)一周

在proPlayer這個(gè)對(duì)象上我們?cè)黾右粋€(gè)方法即可：

proPlayer.rotate = function(){ var i = 1; var rotate = setInterval(function(){ if(i=== 23){ $("#3dplayer_1").show(); $("#d3player_0").show(); clearInterval(rotate); } $("#3dplayer canvas").hide(); $("#3dplayer_"+i).show(); $("#d3player_0").show(); i++; },50) }

之后在proPlayer.init() 方法里最后一步調(diào)用它就行

5.總結(jié)

我相信這種需求在電商領(lǐng)域中是比較常見(jiàn)的，用戶體驗(yàn)也不錯(cuò)，效果生動(dòng)有科技感，我還引用了Jquery，大家有興趣也可以擴(kuò)展一下這個(gè)簡(jiǎn)單的插件。

Github link

相關(guān)知識(shí)

\'朋友說(shuō)放心商城有個(gè)減肥的左旋360
康比特左旋360(50粒裝)產(chǎn)品介紹
既健康又有效的減肥產(chǎn)品 科邁思左旋360減肥咖啡
可以減肥的產(chǎn)品有哪些？減肥產(chǎn)品哪個(gè)比較好？
朋友圈售價(jià)上千的減肥產(chǎn)品有毒！微商販賣減肥保健品被判5年
比較好的減肥產(chǎn)品有哪些
比較好的減肥產(chǎn)品
網(wǎng)紅減肥食品爆雷?電商仍在售可疑產(chǎn)品
無(wú)公害農(nóng)產(chǎn)品（關(guān)于無(wú)公害農(nóng)產(chǎn)品的基本詳情介紹） 愛(ài)問(wèn)知識(shí)人
促進(jìn)代謝的產(chǎn)品，有介紹的嗎？ 愛(ài)問(wèn)知識(shí)人

網(wǎng)址: 寫(xiě)一個(gè)可拓展的360度產(chǎn)品旋轉(zhuǎn)插件做過(guò)電商的朋友應(yīng)該比較熟悉，當(dāng)我們?cè)诮榻B一個(gè)實(shí)體產(chǎn)品的時(shí)候必不可少的會(huì)有這個(gè)產(chǎn)品的圖片 http://www.u1s5d6.cn/newsview882122.html