产品360°旋转
Posted lcx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了产品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>
以上是关于产品360°旋转的主要内容，如果未能解决你的问题，请参考以下文章