360度旋转图片插件UIMIX.fullview特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 360度旋转图片插件UIMIX.fullview特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<title>360度旋转图片插件UIMIX.fullview</title>
</head>
<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* threesixty */
#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>

<div id="threesixty" image_count='37' path_pattern='http://www.vivo.com.cn/vivo/xplay3s/360/img-white/white#index#.jpg' end_frame='74' scale='1' fix_width='700' fix_height='700' max_width='700' max_height='700'>
	<em class="loading"><p>0%</p></em>.
	<ol></ol>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/threesixty.min.js"></script>
</body>
</html>

JS代码(threesixty.min.js):

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:10,spinner:false,container:false,pathPattern:false,totalFrames:180,currentFrame:0,frames:[],endFrame:-720,loadedImages:0}
,relocate:function(){
	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:t,marginLeft:l}
)}
,imageLoaded:function(img){
	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){
	var imageName = UIMIX.fullview.data.pathPattern.replace('#index#',UIMIX.fullview.data.loadedImages + 1);
	if (force) imageName += "?" + new Date().getTime();
	var img = new Image();
	img.src = imageName;
	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(){
	UIMIX.fullview.data.frames[0].removeClass("previous-image").addClass("current-image");
	UIMIX.fullview.data.container.children("em.loading").fadeOut("slow",function(){
	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(){
	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(4);
	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(){
	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(){
	if (UIMIX.fullview.data.ticker === 0){
	UIMIX.fullview.data.ticker = setInterval(UIMIX.fullview.render,Math.round(1000 / 60))}
}
,getNormalizedCurrentFrame:function(){
	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);

附件:下载该文件资源,减少时间成本(增值服务)