Ref : https://www.minwt.com/webdesign-dev/js/13694.html

jQuery外掛-360度旋轉產品照片展示

以前相當流行利用Flash來製作360度的產品展示，讓使用者可以直接按住滑鼠，拖拉產品就可看到360度的產品照片，讓使用者可以在虛擬的頁面中，了解到實體產品的各角度的變化，但自從老賈開始打Flash後，現在Flash已消聲匿跡，因此目前比較好的作法，就是透過jQuery的方式來製作，而最近正好有朋友，想製作360度的產品展示功能，所以梅干就尋找了一下，發現到一款相當簡易且好用的360度產品展示的外掛，且套用還相當的簡單，因此有需要的朋友，也趕快來看看囉!

當要開始製作時，要先將360度的產品照片拍好。
梅問題－jQuery外掛-360度旋轉產品照片展示

Step1
首先，將css放到<head>....</head>間。

Step2
首先，將js放到到</body>前。

Step3
當要使用時，將div的類別名稱加入PIC360，接著把要360度的產品照，一一的加到ul li中。

Step4
當完成後，只要滑鼠游標，在區域內由左向右滑動時，產品照片就會跟著旋轉，而這邊梅干只是簡易拍攝，當要顯示跟細膩時，可用專用的拍攝器，以及張數愈多效果愈好，是不是很簡單呀!有需要的朋友，不妨也可參考看看囉!

http://ds.minwt.com.tw/file/sampleView/jQuery/pic360/mwt-pic360.html

http://ds.minwt.com.tw/file/sampleView/jQuery/pic360/css/pic360.css

==========================================================

@charset "utf-8";
/* 必须的样式 */
.PIC360{display:none;overflow:hidden;}
.PIC360 UL,.PIC360 LI{margin:0; padding:0;}
.PIC360 LI{list-style:none;}

/* 可以修改的样式 */
.PIC360{width:400px; margin:10px auto;border:5px solid #CECECE;}

============================================================================

http://ds.minwt.com.tw/file/sampleView/jQuery/pic360/js/pic360-1.0.0.js

============================================================================

/*
 * jQuery Pic360 Plugin
 * version: 1.0.0 (2011.5.22)
 * @requires jQuery v1.4.4 or later
 * @author Yongliang Wen
 * @email wenzongxian@gmail.com
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
;(function($) {
$.fn.pic360 = function() {
 var first_img = this.find('img:first');
 var all_img = this.find('img');
 var img_count = all_img.length;
 if(img_count==0) return;
 var img_width = first_img.width();
 var chg_width = parseInt(img_width/img_count);/* 感应区宽度*/
 var imgs_left = first_img.offset().left;
 this.toggle();
 all_img.toggle();
 first_img.toggle();
 this.width(img_width);/* 设置容器宽度 */
 this.height(first_img.height());/* 设置容器高度 */
 var mouseX = 0;
 var start = false;
 var step = 0;
 var curr_step = 0;/* 当前感应区 */
 var curr_img = 0;/* 当前图片 */
 this.mouseover(function(e){/*鼠标移到本DIV*/
  start = true;
  if(start){
   mouseX = e.screenX;
   /* 获取当前感应区 */
   curr_step=parseInt((mouseX-imgs_left)/chg_width);
   step = curr_step;
  }

 })
 this.mouseout(function(e){/*鼠标移出本DIV*/
  start = false;
 })
 this.mousemove(function(e){
  if(start){
   curr_step=parseInt((e.screenX-imgs_left)/chg_width);
   if(curr_step!=step){
    $(all_img[curr_img]).toggle();/* 隐藏当前图片 */
    if(curr_step>step){
     curr_img = curr_img+1;
     if(curr_img>=img_count) curr_img=0;
    }else{
     curr_img = curr_img-1;
     if(curr_img<0) curr_img=img_count-1;
    }    
    $(all_img[curr_img]).toggle();
    step=curr_step;
   }
  }
 })
};
})(jQuery);
/**
 * 初始化所有Pic360对象
 */
$(document).ready(function(){
 $('.PIC360').each(function(){$(this).pic360()})
})

//$('#console').append('curr_img'+curr_img+'&nbsp;step'+step+'&nbsp;curr_step'+curr_step+'<br/>');







I188

L0

LD0

In/a

Rank1.43M

Age!

l0

+10

whois

source

Rankn/a

Video Adv0

PIN0

IN0





Summary reportDiagnosisDensity00n/a

============================================================================

Web programming 的研究筆記

2016年12月15日星期四

360 度圖片

jQuery外掛-360度旋轉產品照片展示

沒有留言:

張貼留言

2016年12月15日 星期四

360 度圖片

jQuery外掛-360度旋轉產品照片展示

沒有留言:

張貼留言

2016年12月15日星期四