threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示
最近公司做一个项目需要360度展示汽车的外观，就用到了threesixty.min.js,自己总结一下使用方法：
treesixty.min.js 源码：
/*! threesixty-slider 2015-01-06 verison 2.0.5 */ /* http://github.com/vml-webdev/threesixty-slider.git */ !function (a) { "use strict"; a.ThreeSixty = function (b, c) { var d, e = this, f = []; e.$el = a(b), e.el = b, e.$el.data("ThreeSixty", e), e.init = function () { d = a.extend({}, a.ThreeSixty.defaultOptions, c), d.disableSpin && (d.currentFrame = 1, d.endFrame = 1), e.initProgress(), e.loadImages() }, e.resize = function () { }, e.initProgress = function () { e.$el.css({ width: d.width, height: d.height, "background-image": "none !important" }), d.styles && e.$el.css(d.styles), e.responsive(), e.$el.find(d.progress).css({marginTop: d.height / 2 - 15 + "px"}), e.$el.find(d.progress).fadeIn("slow"), e.$el.find(d.imgList).hide() }, e.loadImages = function () { var b, c, g, h; b = document.createElement("li"), h = d.zeroBased ? 0 : 1, c = d.imgArray ? d.imgArray[d.loadedImages] : d.domain + d.imagePath + d.filePrefix + e.zeroPad(d.loadedImages + h) + d.ext + (e.browser.isIE() ? "?" + (new Date).getTime() : ""), g = a("<img>").attr("src", c).addClass("previous-image").appendTo(b), f.push(g), e.$el.find(d.imgList).append(b), a(g).load(function () { e.imageLoaded() }) }, e.imageLoaded = function () { d.loadedImages += 1, a(d.progress + " span").text(Math.floor(100 * (d.loadedImages / d.totalFrames)) + "%"), d.loadedImages >= d.totalFrames ? (d.disableSpin && f[0].removeClass("previous-image").addClass("current-image"), a(d.progress).fadeOut("slow", function () { a(this).hide(), e.showImages(), e.showNavigation() })) : e.loadImages() }, e.showImages = function () { e.$el.find(".txtC").fadeIn(), e.$el.find(d.imgList).fadeIn(), e.ready = !0, d.ready = !0, d.drag && e.initEvents(), e.refresh(), e.initPlugins(), d.onReady(), setTimeout(function () { e.responsive() }, 50) }, e.initPlugins = function () { a.each(d.plugins, function (b, c) { if ("function" != typeof a[c])throw new Error(c + " not available."); a[c].call(e, e.$el, d) }) }, e.showNavigation = function () { if (d.navigation && !d.navigation_init) { var b, c, f, g; b = a("<div/>").attr("class", "nav_bar"), c = a("<a/>").attr({ href: "#", "class": "nav_bar_next" }).html("next"), f = a("<a/>").attr({ href: "#", "class": "nav_bar_previous" }).html("previous"), g = a("<a/>").attr({ href: "#", "class": "nav_bar_play" }).html("play"), b.append(f), b.append(g), b.append(c), e.$el.prepend(b), c.bind("mousedown touchstart", e.next), f.bind("mousedown touchstart", e.previous), g.bind("mousedown touchstart", e.play_stop), d.navigation_init = !0 } }, e.play_stop = function (b) { b.preventDefault(), d.autoplay ? (d.autoplay = !1, a(b.currentTarget).removeClass("nav_bar_stop").addClass("nav_bar_play"), clearInterval(d.play), d.play = null) : (d.autoplay = !0, d.play = setInterval(e.moveToNextFrame, d.playSpeed), a(b.currentTarget).removeClass("nav_bar_play").addClass("nav_bar_stop")) }, e.next = function (a) { a && a.preventDefault(), d.endFrame -= 5, e.refresh() }, e.previous = function (a) { a && a.preventDefault(), d.endFrame += 5, e.refresh() }, e.play = function (a) { var b = a || d.playSpeed; d.autoplay || (d.autoplay = !0, d.play = setInterval(e.moveToNextFrame, b)) }, e.stop = function () { d.autoplay && (d.autoplay = !1, clearInterval(d.play), d.play = null) }, e.moveToNextFrame = function () { 1 === d.autoplayDirection ? d.endFrame -= 1 : d.endFrame += 1, e.refresh() }, e.gotoAndPlay = function (a) { if (d.disableWrap)d.endFrame = a, e.refresh(); else { var b = Math.ceil(d.endFrame / d.totalFrames); 0 === b && (b = 1); var c = b > 1 ? d.endFrame - (b - 1) * d.totalFrames : d.endFrame, f = d.totalFrames - c, g = 0; g = a - c > 0 ? a - c < c + (d.totalFrames - a) ? d.endFrame + (a - c) : d.endFrame - (c + (d.totalFrames - a)) : f + a > c - a ? d.endFrame - (c - a) : d.endFrame + (f + a), c !== a && (d.endFrame = g, e.refresh()) } }, e.initEvents = function () { e.$el.bind("mousedown touchstart touchmove touchend mousemove click", function (a) { a.preventDefault(), "mousedown" === a.type && 1 === a.which || "touchstart" === a.type ? (d.pointerStartPosX = e.getPointerEvent(a).pageX, d.dragging = !0) : "touchmove" === a.type ? e.trackPointer(a) : "touchend" === a.type && (d.dragging = !1) }), a(document).bind("mouseup", function () { d.dragging = !1, a(this).css("cursor", "none") }), a(window).bind("resize", function () { e.responsive() }), a(document).bind("mousemove", function (a) { d.dragging ? (a.preventDefault(), !e.browser.isIE && d.showCursor && e.$el.css("cursor", "url(assets/images/hand_closed.png), auto")) : !e.browser.isIE && d.showCursor && e.$el.css("cursor", "url(assets/images/hand_open.png), auto"), e.trackPointer(a) }), a(window).resize(function () { e.resize() }) }, e.getPointerEvent = function (a) { return a.originalEvent.targetTouches ? a.originalEvent.targetTouches[0] : a }, e.trackPointer = function (a) { d.ready && d.dragging && (d.pointerEndPosX = e.getPointerEvent(a).pageX, d.monitorStartTime < (new Date).getTime() - d.monitorInt && (d.pointerDistance = d.pointerEndPosX - d.pointerStartPosX, d.endFrame = d.pointerDistance > 0 ? d.currentFrame + Math.ceil((d.totalFrames - 1) * d.speedMultiplier * (d.pointerDistance / e.$el.width())) : d.currentFrame + Math.floor((d.totalFrames - 1) * d.speedMultiplier * (d.pointerDistance / e.$el.width())), d.disableWrap && (d.endFrame = Math.min(d.totalFrames - (d.zeroBased ? 1 : 0), d.endFrame), d.endFrame = Math.max(d.zeroBased ? 0 : 1, d.endFrame)), e.refresh(), d.monitorStartTime = (new Date).getTime(), d.pointerStartPosX = e.getPointerEvent(a).pageX)) }, e.refresh = function () { 0 === d.ticker && (d.ticker = setInterval(e.render, Math.round(1e3 / d.framerate))) }, e.render = function () { var a; d.currentFrame !== d.endFrame ? (a = d.endFrame < d.currentFrame ? Math.floor(.1 * (d.endFrame - d.currentFrame)) : Math.ceil(.1 * (d.endFrame - d.currentFrame)), e.hidePreviousFrame(), d.currentFrame += a, e.showCurrentFrame(), e.$el.trigger("frameIndexChanged", [e.getNormalizedCurrentFrame(), d.totalFrames])) : (window.clearInterval(d.ticker), d.ticker = 0) }, e.hidePreviousFrame = function () { f[e.getNormalizedCurrentFrame()].removeClass("current-image").addClass("previous-image") }, e.showCurrentFrame = function () { f[e.getNormalizedCurrentFrame()].removeClass("previous-image").addClass("current-image") }, e.getNormalizedCurrentFrame = function () { var a, b; return d.disableWrap ? (a = Math.min(d.currentFrame, d.totalFrames - (d.zeroBased ? 1 : 0)), b = Math.min(d.endFrame, d.totalFrames - (d.zeroBased ? 1 : 0)), a = Math.max(a, d.zeroBased ? 0 : 1), b = Math.max(b, d.zeroBased ? 0 : 1), d.currentFrame = a, d.endFrame = b) : (a = Math.ceil(d.currentFrame % d.totalFrames), 0 > a && (a += d.totalFrames - (d.zeroBased ? 1 : 0))), a }, e.getCurrentFrame = function () { return d.currentFrame }, e.responsive = function () { d.responsive && e.$el.css({height: e.$el.find(".current-image").first().css("height"), width: "100%"}) }, e.zeroPad = function (a) { function b(a, b) { var c = a.toString(); if (d.zeroPadding)for (; c.length < b;)c = "0" + c; return c } var c = Math.log(d.totalFrames) / Math.LN10, e = 1e3, f = Math.round(c * e) / e, g = Math.floor(f) + 1; return b(a, g) }, e.browser = {}, e.browser.isIE = function () { var a = -1; if ("Microsoft Internet Explorer" === navigator.appName) { var b = navigator.userAgent, c = new RegExp("MSIE ([0-9]{1,}[\\.0-9]{0,})"); null !== c.exec(b) && (a = parseFloat(RegExp.$1)) } return -1 !== a }, e.getConfig = function () { return d }, a.ThreeSixty.defaultOptions = { dragging: !1, ready: !1, pointerStartPosX: 0, pointerEndPosX: 0, pointerDistance: 0, monitorStartTime: 0, monitorInt: 10, ticker: 0, speedMultiplier: 7, totalFrames: 180, currentFrame: 0, endFrame: 0, loadedImages: 0, framerate: 60, domains: null, domain: "", parallel: !1, queueAmount: 8, idle: 0, filePrefix: "", ext: "png", height: "300px", width: "300px", styles: {}, navigation: !1, autoplay: !1, autoplayDirection: 1, disableSpin: !1, disableWrap: !1, responsive: !1, zeroPadding: !1, zeroBased: !1, plugins: [], showCursor: !1, drag: !0, onReady: function () { }, imgList: ".threesixty_images", imgArray: null, playSpeed: 100 }, e.init() }, a.fn.ThreeSixty = function (b) { return Object.create(new a.ThreeSixty(this, b)) } }(jQuery), "function" != typeof Object.create && (Object.create = function (a) { "use strict"; function b() { } return b.prototype = a, new b });
treesixty.css 源码
.threesixty { position: relative; overflow: hidden; margin: 0 auto; } .threesixty .threesixty_images { display: none; list-style: none; margin: 0; padding: 0; } .threesixty .threesixty_images img { position: absolute; top: 0; width: 100%; height: auto; } .threesixty .threesixty_images img.previous-image { visibility: hidden; width: 0; } .threesixty .threesixty_images img.current-image { visibility: visible; width: 100%; } .threesixty .spinner { width: 60px; display: block; margin: 0 auto; height: 30px; background: #333; background: rgba(0, 0, 0, 0.7); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .threesixty .spinner span { font-family: Arial, "MS Trebuchet", sans-serif; font-size: 12px; font-weight: bolder; color: #FFF; text-align: center; line-height: 30px; display: block; } .threesixty .nav_bar { position: absolute; top: 10px; right: 10px; z-index: 11; } .threesixty .nav_bar a { display: block; width: 32px; height: 32px; float: left; text-indent: -99999px; } .threesixty .nav_bar a.nav_bar_play { background-position: 0 0 !important; } .threesixty .nav_bar a.nav_bar_previous { background-position: 0 -73px !important; } .threesixty .nav_bar a.nav_bar_stop { background-position: 0 -37px !important; } .threesixty .nav_bar a.nav_bar_next { background-position: 0 -104px !important; } /* html */ .threesixty:-webkit-full-screen { background: #ffffff; width: 100%; height: 100%; margin-top: 0; padding-top: 200px; } .threesixty:-moz-full-screen { background: #ffffff; width: 100%; height: 100%; margin-top: 0; padding-top: 200px; }
使用方法：
html代码：
<link type="text/css" rel="stylesheet" href="css/threesixty.css"> <script type="text/javascript" src="js/jquery-2.1.1.js"></script> <script type="text/javascript" src="js/threesixty.min.js"></script> <div class="threesixty"> <div class="spinner"> <span>0%</span> </div> <ol class="threesixty_images "></ol> </div>
js代码：
$(window).ready(function(){ $('.threesixty').ThreeSixty({ totalFrames: 12,//图片的总数 endFrame: 2, currentFrame: 1,//初始化时现实的第几个元素 imgList: '.threesixty_images',//显示图片的父级div progress: '.spinner',//显示进度的div imagePath: 'images/car/',//图片的路径 filePrefix: '',//用到的图片的前缀名称 ext: '.png',//存放的图片的后缀名（要一致） height: "30%",//显示区域的高度 width: "100%",//显示区域的宽度 navigation: true,//是否显示导航条（可以进行的操作：上一步 下一步 开始自动旋转） disableSpin: false }); });
如果
navigation：true 就会添加
<div class="nav_bar"><a href="#" class="nav_bar_previous">previous</a><a href="#" class="nav_bar_play">play</a><a href="#" class="nav_bar_next">next</a></div>
可以根据自己的需求修改样式
jquery.threesixty.js 源码：
/*! * ThreeSixty: A jQuery plugin for generating a draggable 360 preview from an image sequence. * Version: 0.1.2 * Original author: @nick-jonas * Website: http://www.workofjonas.com * Licensed under the MIT license */ ;(function ( $, window, document, undefined ) { var scope, pluginName = 'threeSixty', defaults = { dragDirection: 'horizontal', useKeys: false, draggable: true }, dragDirections = ['horizontal', 'vertical'], options = {}, $el = {}, data = [], total = 0, loaded = 0; /** * Constructor * @param {jQuery Object} element main jQuery object * @param {Object} customOptions options to override defaults */ function ThreeSixty( element, customOptions ) { scope = this; this.element = element; options = options = $.extend( {}, defaults, customOptions) ; this._defaults = defaults; this._name = pluginName; // make sure string input for drag direction is valid if($.inArray(options.dragDirection, dragDirections) < 0){ options.dragDirection = defaults.dragDirection; } this.init(); } // PUBLIC API ----------------------------------------------------- $.fn.destroy = ThreeSixty.prototype.destroy = function(){ if(options.useKeys === true) $(document).unbind('keydown', this.onKeyDown); $(this).removeData(); $el.html(''); }; $.fn.nextFrame = ThreeSixty.prototype.nextFrame = function(){ $(this).each(function(i){ var $this = $(this), val = $this.data('lastVal') || 0, thisTotal = $this.data('count'); val = val + 1; $this.data('lastVal', val); if(val >= thisTotal) val = val % (thisTotal - 1); else if(val <= -thisTotal) val = val % (thisTotal - 1); if(val > 0) val = thisTotal - val; val = Math.abs(val); $this.find('.threesixty-frame').css({display: 'none'}); $this.find('.threesixty-frame:eq(' + val + ')').css({display: 'block'}); }); }; $.fn.prevFrame = ThreeSixty.prototype.prevFrame = function(){ $(this).each(function(i){ var $this = $(this), val = $this.data('lastVal') || 0, thisTotal = $this.data('count'); val = val - 1; $this.data('lastVal', val); if(val >= thisTotal) val = val % (thisTotal - 1); else if(val <= -thisTotal) val = val % (thisTotal - 1); if(val > 0) val = thisTotal - val; val = Math.abs(val); $this.find('.threesixty-frame').css({display: 'none'}); $this.find('.threesixty-frame:eq(' + val + ')').css({display: 'block'}); }); }; // PRIVATE METHODS ------------------------------------------------- /** * Initializiation, called once from constructor * @return null */ ThreeSixty.prototype.init = function () { var $this = $(this.element); // setup main container $el = $this; // store data attributes for each 360 $this.each(function(){ var $this = $(this), path = $this.data('path'), count = $this.data('count'); data.push({'path': path, 'count': count, 'loaded': 0, '$el': $this}); total += count; }); _disableTextSelectAndDragIE8(); this.initLoad(); }; /** * Start loading all images * @return null */ ThreeSixty.prototype.initLoad = function() { var i = 0, len = data.length, url, j; $el.addClass('preloading'); for(i; i < len; i++){ j = 0; for(j; j < data[i].count; j++){ url = data[i].path.replace('{index}', j); $('<img/>').data('index', i).attr('src', url).load(this.onLoadComplete); } } }; ThreeSixty.prototype.onLoadComplete = function(e) { var index = $(e.currentTarget).data('index'), thisObj = data[index]; thisObj.loaded++; if(thisObj.loaded === thisObj.count){ scope.onLoadAllComplete(index); } }; ThreeSixty.prototype.onLoadAllComplete = function(objIndex) { var $this = data[objIndex].$el, html = '', l = data[objIndex].count, pathTemplate = data[objIndex].path, i = 0; // remove preloader $this.html(''); $this.removeClass('preloading'); // add 360 images for(i; i < l; i++){ var display = (i === 0) ? 'block' : 'none'; html += '<img class="threesixty-frame" style="display:' + display + ';" data-index="' + i + '" src="' + pathTemplate.replace('{index}', i) + '"/>'; } $this.html(html); this.attachHandlers(objIndex); }; var startY = 0, thisTotal = 0, $downElem = null, lastY = 0, lastX = 0, lastVal = 0, isMouseDown = false; ThreeSixty.prototype.attachHandlers = function(objIndex) { var that = this; var $this = data[objIndex].$el; // add draggable events if(options.draggable){ // if touch events supported, use if(typeof document.ontouchstart !== 'undefined' && typeof document.ontouchmove !== 'undefined' && typeof document.ontouchend !== 'undefined' && typeof document.ontouchcancel !== 'undefined'){ var elem = $this.get()[0]; elem.addEventListener('touchstart', that.onTouchStart); elem.addEventListener('touchmove', that.onTouchMove); elem.addEventListener('touchend', that.onTouchEnd); elem.addEventListener('touchcancel', that.onTouchEnd); } } // mouse down $this.mousedown(function(e){ e.preventDefault(); thisTotal = $(this).data('count'); $downElem = $(this); startY = e.screenY; lastVal = $downElem.data('lastVal') || 0; lastX = $downElem.data('lastX') || 0; lastY = $downElem.data('lastY') || 0; isMouseDown = true; $downElem.trigger('down'); }); // arrow keys if(options.useKeys === true){ $(document).bind('keydown', that.onKeyDown); } // mouse up $(document, 'html', 'body').mouseup(that.onMouseUp); $(document).blur(that.onMouseUp); $('body').mousemove(function(e){ that.onMove(e.screenX, e.screenY); }); }; ThreeSixty.prototype.onTouchStart = function(e) { var touch = e.touches[0]; e.preventDefault(); $downElem = $(e.target).parent(); thisTotal = $downElem.data('count'); startX = touch.pageX; startY = touch.pageY; lastVal = $downElem.data('lastVal') || 0; lastX = $downElem.data('lastX') || 0; lastY = $downElem.data('lastY') || 0; isMouseDown = true; $downElem.trigger('down'); }; ThreeSixty.prototype.onTouchMove = function(e) { e.preventDefault(); var touch = e.touches[0]; scope.onMove(touch.pageX, touch.pageY); }; ThreeSixty.prototype.onTouchEnd = function(e) { }; ThreeSixty.prototype.onMove = function(screenX, screenY){ if(isMouseDown){ var x = screenX, y = screenY, val = 0; $downElem.trigger('move'); if(options.dragDirection === 'vertical'){ if(y > lastY){ val = lastVal + 1; }else{ val = lastVal - 1; } }else{ if(x > lastX){ val = lastVal + 1; }else if(x === lastX){ return; }else{ val = lastVal - 1; } } lastVal = val; lastY = y; lastX = x; $downElem.data('lastY', lastY); $downElem.data('lastX', lastX); $downElem.data('lastVal', lastVal); if(val >= thisTotal) val = val % (thisTotal - 1); else if(val <= -thisTotal) val = val % (thisTotal - 1); if(val > 0) val = thisTotal - val; val = Math.abs(val); $downElem.find('.threesixty-frame').css({display: 'none'}); $downElem.find('.threesixty-frame:eq(' + val + ')').css({display: 'block'}); } }; ThreeSixty.prototype.onKeyDown = function(e) { switch(e.keyCode){ case 37: // left $el.prevFrame(); break; case 39: // right $el.nextFrame(); break; } }; ThreeSixty.prototype.onMouseUp = function(e) { isMouseDown = false; $downElem.trigger('up'); }; /** * Disables text selection and dragging on IE8 and below. */ var _disableTextSelectAndDragIE8 = function() { // Disable text selection. document.body.onselectstart = function() { return false; }; // Disable dragging. document.body.ondragstart = function() { return false; }; }; /** * A really lightweight plugin wrapper around the constructor, preventing against multiple instantiations * @param {Object} options * @return {jQuery Object} */ $.fn[pluginName] = function ( options ) { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new ThreeSixty( this, options )); } }); }; })( jQuery, window, document );
使用方法：
html
<script src="assets/js/jquery-2.1.1.js"></script> <script src="assets/js/jquery.threesixty.js"></script> <div class="threesixty-wrapper"> <div class="threesixty" data-path="assets/img/threesixty_{index}.jpg" data-count="179"> <!-- put your preloader here -->在图片没有加载完毕时，现实的内容，在图片加载完毕之后，就自动删除 <div class="ui-spinner"> <span class="side side-left"> <span class="fill"></span> </span> <span class="side side-right"> <span class="fill"></span> </span> </div> <!-- end preloader --> </div> </div>
js
$(document).ready(function(){ var $threeSixty = $('.threesixty'); $threeSixty.threeSixty({ dragDirection: 'horizontal',//拖拽的方向 useKeys: true,//是否可以使用键盘上的左右按键进行操作 draggable: true//是否可以鼠标拖拽 }); $('.next').click(function(){//显示下一张图片 $threeSixty.nextFrame(); }); $('.prev').click(function(){//显示上一张图片 $threeSixty.prevFrame(); }); $threeSixty.on('down', function(){//拖拽图片时，标题隐藏 $('h1').stop().animate({opacity:0}, 300); }); $threeSixty.on('up', function(){//方法鼠标之后，标题回显 $(' h1').stop().animate({opacity:1}, 500); }); });
