jquery 360度旋转特效js特效代码

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

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

以下是 jquery 360度旋转特效js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>360 degrees product view</title>
        <script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
        <script type="text/javascript" src="js/j360.js" ></script>
    </head>
    <body>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery('#product').j360();
            });
        </script>
        <center>
            <div id="product" style="width: 640px; height: 480px; overflow: hidden;">
                <img src="images/01.jpg" />
                <img src="images/02.jpg" />
                <img src="images/03.jpg" />
                <img src="images/04.jpg" />
                <img src="images/05.jpg" />
                <img src="images/06.jpg" />
                <img src="images/07.jpg" />
                <img src="images/08.jpg" />
                <img src="images/09.jpg" />
                <img src="images/10.jpg" />
                <img src="images/11.jpg" />
                <img src="images/12.jpg" />
                <img src="images/13.jpg" />
                <img src="images/14.jpg" />
                <img src="images/15.jpg" />
                <img src="images/16.jpg" />
                <img src="images/17.jpg" />
                <img src="images/18.jpg" />
                <img src="images/19.jpg" />
                <img src="images/20.jpg" />
                <img src="images/21.jpg" />
                <img src="images/22.jpg" />
                <img src="images/23.jpg" />
                <img src="images/24.jpg" />
                <img src="images/25.jpg" />
                <img src="images/26.jpg" />
                <img src="images/27.jpg" />
                <img src="images/28.jpg" />
                <img src="images/29.jpg" />
                <img src="images/30.jpg" />
                <img src="images/31.jpg" />
                <img src="images/32.jpg" />
                <img src="images/33.jpg" />
                <img src="images/34.jpg" />
                <img src="images/35.jpg" />
                <img src="images/36.jpg" />
            </div>
        </center>
    </body>
</html>

JS代码(j360.js):

/** * j360 jQuery plugin * author Stable Flow * copyright (c) 2009-2010 by StableFlow * link http://www.stableflow.com/downloads/jquery-plugins/360-degrees-product-view/ * * Version:1.0.0 (12/13/2010) * Requires:jQuery v1.3+ * * Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */
(function($){
	$.fn.j360 = function(options){
	var defaults ={
	clicked:false,currImg:1}
var options = jQuery.extend(defaults,options);
	return this.each(function(){
	var $obj = jQuery(this);
	var aImages ={
}
;
	$obj.css({
	'margin-left':'auto','margin-right':'auto','text-align':'center','overflow':'hidden'}
);
	// $obj.prepend('<img src="/images/loader.gif" class="loader" style="margin-top:' + ($obj.height()/2 - 15) + 'px" />');
	$overlay = $obj.clone(true);
	$overlay.html('<img src="images/loader.gif" class="loader" style="margin-top:' + ($obj.height()/2 - 15) + 'px" />');
	$overlay.attr('id','view_overlay');
	$overlay.css({
	'position':'absolute','z-index':'5','top':$obj.offset().top,'left':$obj.offset().left,'background':'#fff'}
);
	$obj.after($overlay);
	$obj.after('<div id="colors_ctrls"></div>');
	jQuery('#colors_ctrls').css({
	'width':$obj.width(),'position':'absolute','z-index':'5','top':$obj.offset().top + $obj.height - 50,'left':$obj.offset().left}
);
	var imageTotal = 0;
	jQuery('img',$obj).each(function(){
	aImages[++imageTotal] = jQuery(this).attr('src');
	preload(jQuery(this).attr('src'));
}
) var imageCount = 0;
	jQuery('.preload_img').load(function(){
	if (++imageCount == imageTotal){
	$overlay.animate({
	'filter':'alpha(Opacity=0)','opacity':0}
,500);
	$obj.html('<img src="' + aImages[1] + '" />');
	$overlay.bind('mousedown touchstart',function(e){
	if (e.type == "touchstart"){
	options.currPos = window.event.touches[0].pageX;
}
else{
	options.currPos = e.pageX;
}
options.clicked = true;
	return false;
}
);
	jQuery(document).bind('mouseup touchend',function(){
	options.clicked = false;
}
);
	jQuery(document).bind('mousemove touchmove',function(e){
	if (options.clicked){
	var pageX;
	if (e.type == "touchmove"){
	pageX = window.event.targetTouches[0].pageX;
}
else{
	pageX = e.pageX;
}
var width_step = 4;
	if (Math.abs(options.currPos - pageX) >= width_step){
	if (options.currPos - pageX >= width_step){
	options.currImg++;
	if (options.currImg > imageTotal){
	options.currImg = 1;
}
}
else{
	options.currImg--;
	if (options.currImg < 1){
	options.currImg = imageTotal;
}
}
options.currPos = pageX;
	$obj.html('<img src="' + aImages[options.currImg] + '" />');
}
}
}
);
}
}
);
	if (jQuery.browser.msie || jQuery.browser.mozilla || jQuery.browser.opera || jQuery.browser.safari ){
	jQuery(window).resize(function(){
	onresizeFunc($obj,$overlay);
}
);
}
else{
	var supportsOrientationChange = "onorientationchange" in window,orientationEvent = supportsOrientationChange ? "orientationchange":"resize";
	window.addEventListener(orientationEvent,function(){
	onresizeFunc($obj,$overlay);
}
,false);
}
onresizeFunc($obj,$overlay)}
);
}
;
}
)(jQuery)function onresizeFunc($obj,$overlay){
	/*$obj.css({
	'margin-top':$(document).height()/2 - 150}
);
	*/
 $overlay.css({
	'margin-top':0,'top':$obj.offset().top,'left':$obj.offset().left}
);
	jQuery('#colors_ctrls').css({
	'top':$obj.offset().top + $obj.height - 50,'left':$obj.offset().left}
);
}
function preload(image){
	if (typeof document.body == "undefined") return;
	try{
	var div = document.createElement("div");
	var s = div.style;
	s.position = "absolute";
	s.top = s.left = 0;
	s.visibility = "hidden";
	document.body.appendChild(div);
	div.innerHTML = "<img class=\"preload_img\" src=\"" + image + "\" />";
}
catch(e){
	// Error. Do nothing.}
}

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