jQuery交互式3D旋转插件特效代码

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

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

以下是 jQuery交互式3D旋转插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
	<meta charset="gb2312">
	<title>jQuery交互式3D旋转插件</title>
	<script type="text/javascript" src="jquery-1.9.1.js"></script>
  <script type="text/javascript" src="jquery.interactive_3d.js"></script>
  <style>
    html {
      height: 100%;
    }
    body {
      background: #fff;
      padding: 0;
      text-align: center;
      font-family: 'open sans';
      position: relative;
      margin: 0;
      height: 100%;
    }
    
    .wrapper {
    	margin: 0 auto; 
    }
    
    a {
      text-decoration: none;
    }
    
    
    h1, h2 {
      width: 100%;
      float: left;
    }
    h1 {
      margin-top: 100px;
      color: #6D461D;
      margin-bottom: 5px;
      font-size: 70px;
      letter-spacing: -4px;
    }
    h2 {
      color: #808080;
      font-weight: 100;
      margin-top: 0;
      margin-bottom: 10px;
    }
    
    .pointer {
      color: #9b59b6;
      font-family: 'Pacifico', cursive;
      font-size: 30px;
      margin-top: 15px;
    }
    pre {
      margin: 80px auto;
    }
    pre code {
      padding: 35px;
      border-radius: 5px;
      font-size: 15px;
      background: rgba(0,0,0,0.1);
      border: rgba(0,0,0,0.05) 5px solid;
      max-width: 500px;
    }


    .main {
      float: left;
      width: 100%;
      margin: 0 auto;
    }
    
    .main h1 {
      padding:20px 0px;
      float: none;
      width: auto;
      font-size: 50px;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      font-weight: 100;
      color: black;
      margin: 0;
      margin-top: 150px;
      letter-spacing: -1px;
    }
   
    .main h1.demo1 {
      background: #1ABC9C;
    }
    
    .reload.bell {
      font-size: 12px;
      padding: 20px;
      width: 45px;
      text-align: center;
      height: 47px;
      border-radius: 50px;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
    }
    
    .reload.bell #notification {
      font-size: 25px;
      line-height: 140%;
    }
    
    .reload, .btn{
      display: inline-block;
      border: 4px solid #08C;
      border-radius: 5px;
        text-align: center;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      background: #08C;
      display: inline-block;
      line-height: 100%;
      padding: 0.7em;
      text-decoration: none;
      color: #fff;
      width: 100px;
      line-height: 140%;
      font-size: 17px;
      font-family: open sans;
      font-weight: bold;
        width: 200px;
    }
    .btn:hover{
      background: #12AEFC;
    }
    .clear {
      width: auto;
    }
    .credit {
      text-align: left;
      color: #000;
      padding: 10px 0;
      margin: 0 0 40px 0;
      float: left;
      width: 100%;
    }
    .credit a {
      color: #08C;
      text-decoration: none;
      font-weight: bold;
    }
    
    .back {
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      display: block;
      padding: 7px;
      width: 100%;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      background: rgba(0, 0, 0, 0.05);
      font-weight: bold;
      font-size: 13px;
      color: #000;
      -webkit-transition: all 200ms ease-out;
      -moz-transition: all 200ms ease-out;
      -o-transition: all 200ms ease-out;
      transition: all 200ms ease-out;
    }
    .back:hover {
      background: rgba(0, 0, 0, 0.15);
    }
    .main{
      margin: 50px auto;
    }
    .page_container {
      overflow:hidden;
      max-width: 1000px;
      margin: 0 auto;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      padding: 40px 20px;
      background: white;
    }
    .page_container .interactive_3d {
      position: relative;
    }
    .page_container .interactive_3d > img{
      position: relative;
      float: left;
      left: 0;
      width: 333px;
    }
    .caption {
      float: right;
      width: 555px;
      text-align: left;
    }
    @media screen and (max-width: 948px) {
      .caption {
        width: 100%;
        float: left;
        text-align: center;
        padding: 0 25px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        margin-bottom: 45px;
      }
      .main h1 {
        margin-top: 15px;
      }
      .credit {
        text-align: center;
      }
      .page_container .interactive_3d > img {
        width: 100%;
        max-width: 333px;
        float: none;
      }
    }
	</style>
	<script>
	  $(document).ready( function() {
	    $("#i3d").interactive_3d({
	      frames: 38
	    });
	  });
		
	</script>
</head>
<body>
    <div class="wrapper">	
    	<div class="main">
        <div class="page_container">
          <div id="i3d" class="interactive_3d">
            
            <div class="caption">
              <h1>jQuery Interactive 3D</h1>
              <h2>Create a 3D interactive object using images and one simple JS call</h2>
             
            </div>
            
            <img src="images/frame_1.png">
          </div>
        </div>
      </div>
    </div> 
</body>
</html>

JS代码(jquery.interactive_3d.js):

/* =========================================================== * jquery.interactive_3d.js v1.1 * =========================================================== * Copyright 2013 Pete Rojwongsuriya. * http://www.thepetedesign.com * * Create a 3D interactive object using images as frames * with one js call * * https://github.com/peachananr/interactive_3d * * ========================================================== */
!function($){
	var defaults ={
	frames:10,cursor:"move",speed:0,entrance:true,preloadImages:true,touchSupport:true,loading:"Loading..",autoPlay:false}
;
	function touchHandler(event){
	var touch = event.changedTouches[0];
	var simulatedEvent = document.createEvent("MouseEvent");
	simulatedEvent.initMouseEvent({
	touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}
[event.type],true,true,window,1,touch.screenX,touch.screenY,touch.clientX,touch.clientY,false,false,false,false,0,null);
	touch.target.dispatchEvent(simulatedEvent);
}
$.fn.preload = function(el){
	$("<div class='images_cache'></div>").hide().appendTo(el);
	this.each(function(){
	$('<img/>').attr("src",this).appendTo(".images_cache")}
);
}
$.fn.drags = function(settings){
	var $el = this;
	return $el.css('cursor',settings.cursor).on("mousedown",function(e){
	var $drag = $(this).addClass('draggable'),cur_pos = e.pageX,last_position ={
}
;
	$drag.parents().on("mousemove",function(e){
	if($('.draggable').length > 0){
	var src = $el.find("img.main-frame").attr("src"),img_name = src.split('/')[src.split('/').length-1],cur_frame = img_name.split('_')[1].split('.')[0];
	if (typeof(last_position.x) != 'undefined'){
	//get the change from last position to this position var deltaX = last_position.x - e.clientX,deltaY = last_position.y - e.clientY;
	if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0){
	if(cur_frame > 1){
	setTimeout(function(){
	var img_name = src.split('/')[src.split('/').length-1] var directory = src.split('/').slice(0,-1).join("/") var new_frame = directory + "/" + img_name.split('_')[0] + "_" + (parseInt(cur_frame) - 1) + "." + img_name.split('.')[1] $el.find("img.main-frame").attr("src",new_frame)}
,settings.speed)}
else{
	setTimeout(function(){
	var img_name = src.split('/')[src.split('/').length-1] var directory = src.split('/').slice(0,-1).join("/") var new_frame = directory + "/" + img_name.split('_')[0] + "_" + (parseInt(settings.frames)) + "." + img_name.split('.')[1] $el.find("img.main-frame").attr("src",new_frame)}
,settings.speed)}
}
else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0){
	if(cur_frame < settings.frames){
	setTimeout(function(){
	var img_name = src.split('/')[src.split('/').length-1] var directory = src.split('/').slice(0,-1).join("/") var new_frame = directory + "/" + img_name.split('_')[0] + "_" + (parseInt(cur_frame) + 1) + "." + img_name.split('.')[1] $el.find("img.main-frame").attr("src",new_frame)}
,settings.speed)}
else{
	setTimeout(function(){
	var img_name = src.split('/')[src.split('/').length-1] var directory = src.split('/').slice(0,-1).join("/") var new_frame = directory + "/" + img_name.split('_')[0] + "_" + 1 + "." + img_name.split('.')[1] $el.find("img.main-frame").attr("src",new_frame)}
,settings.speed)}
}
}
last_position ={
	x:e.clientX,y:e.clientY}
;
}
$(".draggable").on("mouseup",function(){
	$(this).removeClass('draggable')}
);
}
);
	e.preventDefault();
	// disable selection}
).on("mouseup",function(){
	$(this).removeClass('draggable');
}
);
}
$.fn.interactive_3d = function(options){
	var settings = $.extend({
}
,defaults,options),el = $(this);
	el.find(" > img").addClass("main-frame");
	el.drags(settings),x = 0,step = 100 / parseInt(settings.frames),cur_frame = el.find("img.main-frame").attr("src").split('_')[1].split('.')[0];
	function animate_3d(){
	var src = el.find("img.main-frame").attr("src");
	el.find("img.main-frame").css("opacity",(x * step)/100);
	if(cur_frame < settings.frames){
	setTimeout(function(){
	var img_name = src.split('/')[src.split('/').length-1] var directory = src.split('/').slice(0,-1).join("/") var new_frame = directory + "/" + img_name.split('_')[0] + "_" + (parseInt(cur_frame) + 1) + "." + img_name.split('.')[1] el.find("img.main-frame").attr("src",new_frame) cur_frame = parseInt(cur_frame) + 1;
}
,settings.speed)}
else{
	setTimeout(function(){
	var img_name = src.split('/')[src.split('/').length-1] var directory = src.split('/').slice(0,-1).join("/") var new_frame = directory + "/" + img_name.split('_')[0] + "_" + 1 + "." + img_name.split('.')[1] el.find("img.main-frame").attr("src",new_frame) cur_frame = 1;
}
,settings.speed)}
if (x++ < (settings.frames - 1)){
	if (settings.autoPlay != false){
	setTimeout(animate_3d,0);
}
else{
	setTimeout(animate_3d,(x * 1.5));
}
}
}
if (settings.entrance == true && settings.autoPlay == false ){
	if (settings.loading == false && settings.autoPlay == false) animate_3d();
}
if (settings.touchSupport == true){
	document.addEventListener("touchstart",touchHandler,true);
	document.addEventListener("touchmove",touchHandler,true);
	document.addEventListener("touchend",touchHandler,true);
	document.addEventListener("touchcancel",touchHandler,true);
}
if (settings.preloadImages == true){
	var src = el.find("img.main-frame").attr("src");
	arr = [] for (var i = 1;
	i < settings.frames + 1;
	i++){
	var img_name = src.split('/')[src.split('/').length-1] var directory = src.split('/').slice(0,-1).join("/") arr.push(directory + "/" + img_name.split('_')[0] + "_" + i + "." + img_name.split('.')[1])}
$(arr).preload(el);
	if (settings.loading != false){
	var imgs = $(".images_cache > img").not(function(){
	return this.complete;
}
);
	var count = imgs.length;
	el.append("<div class='loading_3d'>" + settings.loading + "</div>");
	el.find(".main-frame").css("visibility","hidden");
	if (count){
	imgs.load(function(){
	count--;
	if (!count){
	el.find(".main-frame").css("visibility","visible");
	el.find(".loading_3d").remove();
	if (settings.autoPlay == false) animate_3d();
}
}
);
}
else{
	el.find(".main-frame").css("visibility","visible");
	el.find(".loading_3d").remove();
	if (settings.autoPlay == false) animate_3d();
}
}
}
if (settings.autoPlay != false){
	function intervalTrigger(){
	return window.setInterval( function(){
	animate_3d();
}
,settings.autoPlay );
}
;
	var id = intervalTrigger();
	el.mouseenter(function(){
	window.clearInterval(id);
}
).mouseleave(function(){
	id = intervalTrigger();
}
);
}
}
}
(window.jQuery);

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