产品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>

时间： 2024-09-30 10:51:34

产品360°旋转的相关文章

html5 图片360旋转

test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片360度旋转</title> <style> input { font-size:18px; padding:5px 20px 5px 20px; font-weight:bold; color:white; backgr

360旋转动画

-(void)rote360Image{ CABasicAnimation *animation =[CABasicAnimation animationWithKeyPath:@"transform" ]; animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; //圍繞z軸旋轉,垂直螢幕 animation.toValue =[NSValue valueWithCATransform

继承View绘制正方形且360旋转

1 import android.content.Context; 2 import android.graphics.Canvas; 3 import android.graphics.Color; 4 import android.graphics.Paint; 5 import android.util.AttributeSet; 6 import android.view.View; 7 8 public class RotatingRect extends View { 9 11 pr

360 旋转

- (void)rotateSpinningView { [UIView animateWithDuration:1.5 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI); } completion:^(BOOL finished) { [self rota

360全景系统看房，对现在的售楼处和客户有什么帮助

360全景展示系统是一种将平面图片转换为三维图片的一种技术,可以再现拍摄现场所有景象,将浏览者带入身临其境般的真实场景,相当于把楼盘环境和样板间搬到了网上. 全景展示是在照片基础之上拼合得到的图像,限度的保留了场景的真实性. 用户可以通过点击或滚动鼠标,放大.缩小自己感兴趣的场景,也可用鼠标左键按住拖动,观看场景的各个方向,为用户前期考察项目提供手依据. 360全景售楼系统是以360全景技术为特色,集影视广告.三维动画.互动多媒体触控技术.网络科技于一身的新型数字化营销工具.整合内容包括 项目规

什么是360全景，360全景有什么特点?

360全景摄影给人一种前所未有的浏览体验,让你足不出户就能身临其境到现场的环境.360全景摄影其实是利用相机环拍360所得的一组照片,再通过专业软件无缝处理拼接所得的一张全景图像,然后采用flash技术制作为swf格式的图像.该图像可以用鼠标随意上下.左右.前后拖动观看,亦可以通过鼠标滚轮放大.缩小场景.图像内部可安放热点,点击可以实现场景的来回切换.除此之外还可以可以插入语音解说,图片及文字说明,酷雷曼轩致力于全新的展现形式,紧跟潮流,满足企业的不同需求,深的客户的信赖. 360全景拍摄应用领

解读360全景能在哪些行业中应用

360全景技术是目前全球范围内迅速发展并逐步流行的一种视觉新技术.它给人们带来全新的真实现场感和交互式的感受.它可广泛应用于三维电子商务,如在线的房地产楼盘展示.虚拟旅游.虚拟教育等领域.我们采用鱼眼镜头拍摄的照片视角可达到180度,在1米的距离以上,景深可达无限远;可使被摄体在画面中显示出非常鲜明的纵深效果,再利用软件专业合成处理,发布为3D全景文件,所显示360全景即为真实场景,与传统的虚拟现实相比更具真实感,更为经济;控制面板工具条,使普通用户操作更为简便.360全景图像源自对真实场景的摄

第一课 产品经理的来龙去脉

1.1 什么是产品 ● 产品的定义 产品是指能够提供给市场,被人们使用和消遣,并能满足人们某种需要的任何东西. ▲有形产品 ▲无形产品  ●  所有产品都是可以被明码标价的.  ●  互联网产品当然就是基于互联网的相关产品 - 360安全卫士,QQ,微信,微博等. 1.2 杰出的产品经理 乔布斯 - 苹果 扎克伯德 - facebook 杰克多西 - twitter 周鸿祎 -360 托利马 - 腾讯 张小龙 - QQ邮箱.foxmail 1.3 产品经理诞生的背景 ● 1.3.1 国内互联网发

WPF动态加载3D&nbsp;放大-旋转-平移

原文:WPF动态加载3D 放大-旋转-平移 WavefrontObjLoader.cs 第二步:ModelVisual3DWithName.cs public class ModelVisual3DWithName:ModelVisual3D { public string Name { get; set; } public object Tag { get; set; } } 第三步:MainWindow.xmal <Grid x:Name="lay"> <View