产品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_ -1,

        fix_height: -1,

        max_ -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({

            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>