最近公司做一个项目需要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 );
View Code
使用方法:
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); }); });