产品360°旋转

vivo官网的一个360图片循转的小demo，感觉挺有趣的，于是研究了一番，把遇到的一些问题总结了下，只是从基础层面研究，对于想实现这个功能的获取有点帮助。大神还请帮忙指点迷津。多谢评价。

言归正传，这个功能总体来说是使用了jq的一个UIMIX的插件，把我们想实现这个功能的div设置成UIMIX对象，然后在js中操纵UIMIX对象来实现的。首先我们要明确一点，想要使用插件必须把操作元素init成相关插件的对象，UIMIX也不例外。话不多说，直接贴码：

html：

<<div id="threesixty" image_count='37' path_pattern='./image/img副本/white#index#.jpg' end_frame='74' scale='1' fix_width='500' fix_height='500' max_width='500' max_height='500'>

<em class="loading"><p>0%</p></em>

<ol></ol>

</div>

分析：我们操作的就是这个id为threesixty的div对象，image_count为要显示的图片的个数，也就是360图片循转需要的总图片数，path_pattren为要显示的图片的地址，其中#index#将用来被替换成图片的区分符，例如1，2，3，fix_width为设置图片的最大宽度，后面的属性也是一样。

css：

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

a

#threesixty{position:absolute;overflow:hidden;top:0;left:0;width:100%;height:100%;}

#threesixty ol{display: none;}

#threesixty img{position:absolute;top:0;width:100%;height:auto;}

.current-image{visibility:visible;width:100%;}

.previous-image{visibility:hidden;width:0;}

#threesixty .loading{position:absolute;left:50%;top:50%;width:90px;height:90px;margin-left:-45px;margin-top:-50px;display:none;}

#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;}

#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;}

</style>

关键点就是js：

首先要声明UIMIX对象，然后设置UIMIX.fullview，init这个对象，下面是对每个方法的粗略解释：

relocate为设置要显示UIMIX对象的宽高以及边距的；

imageLoaded和imageLoaded配合使用，他的实现原理就是为ol设置image_count个li标签，并在li标签里对应的创建ima标签。

然后是start方法，refresh方法，然后是render跟getNormalizedCurrentFrame方法循环调用image_count次，在这里图片就会出现了，基本功能就实现了。

因为之前遇到过换图片之后图片不显示的问题，在这里说一下我解决的方法：

首先，你得让序列数为0，存放照片的数组为空：UIMIX.fullview.data.currentFrame=0;UIMIX.fullview.data.frames=[];

其次，就是把我们之前在ol创建的li标签删掉，以便重新创建：

UIMIX.fullview.data.Container.children('ol').find('li').each(function(){

$(this).remove();

});

然后，就是改变image_count和path_pattern属性为你要改变的值：

$('#threesixty').attr('image_count',18);

$('#threesixty').attr('path_pattern','./image/ds01bai/#index#.png');//这里的路径改变之后图片也会改变；

最后，要重新init一下，要重新init一下，要重新init一下，重要的事情说三遍。这样基本就可以了。

下面为完整代码：

css:

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

a

#threesixty{position:absolute;overflow:hidden;top:0;left:0;width:100%;height:100%;}

#threesixty ol{display: none;}

#threesixty img{position:absolute;top:0;width:100%;height:auto;}

.current-image{visibility:visible;width:100%;}

.previous-image{visibility:hidden;width:0;}

#threesixty .loading{position:absolute;left:50%;top:50%;width:90px;height:90px;margin-left:-45px;margin-top:-50px;display:none;}

#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;}

#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.vivo.com.cn/vivo/xplay3s/360/img-white/white#index#.jpg*/

</style>

html：

<div id="threesixty" image_count='37' path_pattern='./image/img副本/white#index#.jpg' end_frame='74' scale='1' fix_width='500' fix_height='500' max_width='500' max_height='500'>

<em class="loading"><p id="ppp">0%</p></em>

<ol></ol>

</div>

<button style='width: 100px;height: 100px;' onclick="change()">改变</button>

js:

<script type="text/JavaScript">

function change(){

UIMIX.fullview.data.currentFrame=0;

UIMIX.fullview.data.frames=[];

UIMIX.fullview.data.container.children('ol').find('li').each(function(){

$(this).remove();

});

$('#threesixty').attr('image_count',18);

$('#threesixty').attr('path_pattern','./image/ds01bai/#index#.png');//这里的路径改变之后图片也会改变

UIMIX.fullview.data.loadedImages=0;

$(document).ready(UIMIX.fullview.init);

}

if (typeof(UIMIX) == 'undefined') UIMIX = {};

UIMIX.fullview = {

data: {

ready: false,

dragging: false,

pointerStartPosX: 0,

scale: 1,

fix_width: -1,

fix_height: -1,

max_width: -1,

max_height: -1,

monitorStartTime: 0,

monitorInt: 10,

ticker: 0,

speedMultiplier: 5,

spinner: false,

container: false,

pathPattern: false,

totalFrames: 180,

currentFrame: 0,

frames: [],

endFrame: -720,

loadedImages: 0

},

relocate: function() {

// alert(12);

var w, h, l, t;

if (UIMIX.fullview.data.fix_width > 0 && UIMIX.fullview.data.fix_height > 0) {

l = Math.max(0, (w - UIMIX.fullview.data.fix_width) / 2);

t = Math.max(0, (h - UIMIX.fullview.data.fix_height) / 2);

w = UIMIX.fullview.data.fix_width;

h = UIMIX.fullview.data.fix_height

} else {

w = UIMIX.fullview.data.max_width > 0 ? Math.min(UIMIX.fullview.data.max_width, $(window).width()) : $(window).width();

h = UIMIX.fullview.data.max_height > 0 ? Math.min(UIMIX.fullview.data.max_height, $(window).height()) : $(window).height();

if (w / h > UIMIX.fullview.data.scale) {

w = h * UIMIX.fullview.data.scale

} else {

h = w / UIMIX.fullview.data.scale

}

l = ($(window).width() - w) / 2;

t = ($(window).height() - h) / 2

}

UIMIX.fullview.data.container.css({

width: w,

height: h,

marginTop: 0,

marginLeft: 0

})

},

imageLoaded: function(img) {

alert(img.src);

// img.src = 'http://b.hiphotos.baidu.com/album/s%3D1600%3Bq%3D90/sign=4f04be8ab8014a90853e42bb99470263/b8389b504fc2d562d426d1d5e61190ef76c66cdf.jpg?v=tbs'

var li = $('<li></li>');

var image = $('<img>').attr('src', img.src).addClass("previous-image").appendTo(li);

UIMIX.fullview.data.frames.push(image);

UIMIX.fullview.data.container.children('ol').append(li);

UIMIX.fullview.data.loadedImages++;

UIMIX.fullview.data.container.find('em.loading p').text(Math.floor(UIMIX.fullview.data.loadedImages / UIMIX.fullview.data.totalFrames * 100) + "%");

if (UIMIX.fullview.data.loadedImages == UIMIX.fullview.data.totalFrames) {

UIMIX.fullview.start()

} else {

UIMIX.fullview.loadImage()

}

},

loadImage: function(force) {

// alert(0);

var imageName = UIMIX.fullview.data.pathPattern.replace('#index#', UIMIX.fullview.data.loadedImages + 1);

// alert(imageName);

if (force) imageName += "?" + new Date().getTime();

var img = new Image();

img.src = imageName;

// alert(img.src);

if (img.complete) {

UIMIX.fullview.imageLoaded(img);

return

}

$(img).load(function() {

UIMIX.fullview.imageLoaded(img)

}).error(function() {

if (force) {

UIMIX.fullview.data.container.html('<div style="text-align:center;margin-top:50%;">加载失败，<a href="' + location.href + '">请重试</a></div>')

} else {

UIMIX.fullview.loadImage(true)

}

})

},

start: function() {

// alert(1);

UIMIX.fullview.data.frames[0].removeClass("previous-image").addClass("current-image");

UIMIX.fullview.data.container.children("em.loading").fadeOut("slow",

function() {

// alert('测试');

// UIMIX.fullview.data.container.children("em.loading").remove();

UIMIX.fullview.data.container.children('ol').fadeIn("slow");

UIMIX.fullview.data.ready = true;

UIMIX.fullview.refresh()

})

},

init: function() {

// alert(2);

UIMIX.fullview.data.container = $('#threesixty');

UIMIX.fullview.data.container.on({

mousedown: function() {

$("body").addClass("drag")

},

mouseup: function() {

$("body").removeClass("drag")

}

});

if (UIMIX.fullview.data.container.attr('image_count')) {

UIMIX.fullview.data.totalFrames = parseInt(UIMIX.fullview.data.container.attr('image_count'))

}

if (UIMIX.fullview.data.container.attr('end_frame')) {

UIMIX.fullview.data.endFrame = parseInt(UIMIX.fullview.data.container.attr('end_frame'))

}

if (UIMIX.fullview.data.container.attr('scale')) {

UIMIX.fullview.data.scale = parseInt(UIMIX.fullview.data.container.attr('scale'))

}

if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {

if (UIMIX.fullview.data.container.attr('fix_width')) {

UIMIX.fullview.data.fix_width = parseInt(UIMIX.fullview.data.container.attr('fix_width'))

}

if (UIMIX.fullview.data.container.attr('fix_height')) {

UIMIX.fullview.data.fix_height = parseInt(UIMIX.fullview.data.container.attr('fix_height'))

}

}

if (UIMIX.fullview.data.container.attr('max_width')) {

UIMIX.fullview.data.max_width = parseInt(UIMIX.fullview.data.container.attr('max_width'))

}

if (UIMIX.fullview.data.container.attr('max_height')) {

UIMIX.fullview.data.max_height = parseInt(UIMIX.fullview.data.container.attr('max_height'))

}

$(window).resize(UIMIX.fullview.relocate);

UIMIX.fullview.relocate();

UIMIX.fullview.data.pathPattern = UIMIX.fullview.data.container.attr('path_pattern');

try {

UIMIX.fullview.data.spinner = new CanvasLoader('loading');

UIMIX.fullview.data.spinner.setShape("spiral");

UIMIX.fullview.data.spinner.setDiameter(80);

UIMIX.fullview.data.spinner.setDensity(80);

UIMIX.fullview.data.spinner.setRange(1);

UIMIX.fullview.data.spinner.setSpeed(1);

UIMIX.fullview.data.spinner.setColor("#008cd6");

UIMIX.fullview.data.spinner.show()

} catch(e) {

UIMIX.fullview.data.spinner = $("#spinner")

}

UIMIX.fullview.data.container.children("em.loading").fadeIn("slow");

UIMIX.fullview.loadImage();

$(document).mousedown(function(event) {

event.preventDefault();

pointerStartPosX = UIMIX.fullview.getPointerEvent(event).pageX;

UIMIX.fullview.data.dragging = true

}).mouseup(function(event) {

event.preventDefault();

UIMIX.fullview.data.dragging = false

}).mousemove(function(event) {

event.preventDefault();

UIMIX.fullview.trackPointer(event)

}).live("touchstart",

function(event) {

event.preventDefault();

pointerStartPosX = UIMIX.fullview.getPointerEvent(event).pageX;

UIMIX.fullview.data.dragging = true

}).live("touchmove",

function(event) {

event.preventDefault();

UIMIX.fullview.trackPointer(event)

}).live("touchend",

function(event) {

event.preventDefault();

UIMIX.fullview.data.dragging = false

})

},

render: function() {

// alert(5);

if (UIMIX.fullview.data.currentFrame !== UIMIX.fullview.data.endFrame) {

var frameEasing = UIMIX.fullview.data.endFrame < UIMIX.fullview.data.currentFrame ?Math.floor((UIMIX.fullview.data.endFrame - UIMIX.fullview.data.currentFrame) * 0.1) :Math.ceil((UIMIX.fullview.data.endFrame - UIMIX.fullview.data.currentFrame) * 0.1);

UIMIX.fullview.data.frames[UIMIX.fullview.getNormalizedCurrentFrame()].removeClass("current-image").addClass("previous-image");

UIMIX.fullview.data.currentFrame += frameEasing;

UIMIX.fullview.data.frames[UIMIX.fullview.getNormalizedCurrentFrame()].removeClass("previous-image").addClass("current-image")

} else {

window.clearInterval(UIMIX.fullview.data.ticker);

UIMIX.fullview.data.ticker = 0

}

},

refresh: function() {

// alert(6);

if (UIMIX.fullview.data.ticker === 0) {

UIMIX.fullview.data.ticker = setInterval(UIMIX.fullview.render, Math.round(1000 / 60))

}

},

getNormalizedCurrentFrame: function() {

// alert(7);

var c = -Math.ceil(UIMIX.fullview.data.currentFrame % UIMIX.fullview.data.totalFrames);

if (c < 0) c += (UIMIX.fullview.data.totalFrames - 1);

return c

},

getPointerEvent: function(event) {

return event.originalEvent.targetTouches ? event.originalEvent.targetTouches[0] : event

},

trackPointer: function(event) {

//触碰走的方法

if (!UIMIX.fullview.data.ready || !UIMIX.fullview.data.dragging) return;

var x = UIMIX.fullview.getPointerEvent(event).pageX;

if (UIMIX.fullview.data.monitorStartTime < new Date().getTime() - UIMIX.fullview.data.monitorInt) {

var dis = x - UIMIX.fullview.data.pointerStartPosX;

UIMIX.fullview.data.endFrame = UIMIX.fullview.data.currentFrame +Math.ceil((UIMIX.fullview.data.totalFrames - 1) * UIMIX.fullview.data.speedMultiplier * (dis / UIMIX.fullview.data.container.width()));

UIMIX.fullview.refresh();

UIMIX.fullview.data.monitorStartTime = new Date().getTime();

UIMIX.fullview.data.pointerStartPosX = x

}

}

};

$(document).ready(UIMIX.fullview.init);

</script>