jQ 3D圆形立体旋转特效代码

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

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

以下是 jQ 3D圆形立体旋转特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"  alt=""/>
<title>jQ 3D圆形立体旋转</title>
<link rel="stylesheet" type="text/css" href="css/carousel.css" media="screen" alt=""/>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" alt=""/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($){
		$('#carousel').carousel({width: 870, 
								 height: 350, 
								 itemWidth:120, 
								 horizontalRadius:270, 
								 verticalRadius:85, 
								 resize:false, 
								 mouseScroll:false, 
								 mouseDrag:true, 
								 scaleRatio:0.4, 
								 scrollbar:true, 
								 tooltip:true, 
								 mouseWheel:true, 
								 mouseWheelReverse:true});
	});
</script>
</head>
<body>
	<div id="wide-wrapper">
    	<div id="header">
    		<img src="images/name.jpg" width="280" height="50" alt="3d carousel"/>
   		</div>
		<ul id="carousel">
			<li>
				<img src="images/image1.jpg" alt=""/>
				<div class="tooltip">Image description</div>
			</li>
			<li>
				<img src="images/image2.jpg" alt=""/>
			</li>
			<li>
				<img src="images/image3.jpg" alt=""/>                   
			</li>
			<li>
				<img src="images/image4.jpg" alt=""/>
				<div class="tooltip"><u>Image title</u><br/><br alt=""/>Tooltips 
					support <i>HTML</i> text.</div>
			</li>
			<li>
				<img src="images/image5.jpg" alt=""/>
			</li>
			<li>
				<img src="images/image6.jpg" alt=""/>
			</li>
			<li>
				<img src="images/image7.jpg" alt=""/>
				<div class="tooltip"><u>Image title</u><br/><br/><img src="images/image7.jpg" width="60" height="50" style="float:left; margin-right:10px; margin-bottom:10px;" alt=""/>Load 
					images inside the tooltip.</div>
			</li>
			<li>
				<img src="images/image8.jpg" alt=""/>
			</li>
			<li>
				<img src="images/image9.jpg" alt=""/>
			</li>
			<li>
				<img src="images/image10.jpg" alt=""/>
				<div class="tooltip">Image description</div>
			</li>
			<li>
				<img src="images/image11.jpg" alt=""/>
			</li>
			<li>
				<img src="images/image12.jpg" alt=""/>
			</li>
			<li>
				<img src="images/image13.jpg" alt=""/>
				<div class="tooltip"><u>Image title</u><br/><br/>Tooltips 
					support <i>HTML</i> text.</div>
			</li>
			<li>
				<img src="images/image14.jpg" alt=""/>
			</li>
			<li>
				<img src="images/image15.jpg" alt=""/>
			</li>
			<li>
				<img src="images/image16.jpg" alt=""/>
				<div class="tooltip"><u>Image title</u><br/><br/><img src="images/image16.jpg" width="60" height="50" style="float:left; margin-right:10px; margin-bottom:10px;" alt=""/>Load 
					images inside the tooltip.</div>
			</li>
			<li>
				<img src="images/image17.jpg" alt=""/> 
			</li>
			<li>
				<img src="images/image18.jpg" alt=""/>
			</li>
			<li>
				<img src="images/image19.jpg" alt=""/>
			</li>
		</ul>
    </div>
</body>
</html>

JS代码(jquery.mousewheel.js):

/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net) * Licensed under the MIT License (LICENSE.txt). * * Thanks to:http://adomas.org/javascript-mouse-wheel/ for some pointers. * Thanks to:Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. * Thanks to:Seamus Leahy for adding deltaX and deltaY * * Version:3.0.6 * * Requires:1.2.2+ */
(function($){
	var types = ['DOMMouseScroll','mousewheel'];
	if ($.event.fixHooks){
	for ( var i=types.length;
	i;
	){
	$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel ={
	setup:function(){
	if ( this.addEventListener ){
	for ( var i=types.length;
	i;
	){
	this.addEventListener( types[--i],handler,false );
}
}
else{
	this.onmousewheel = handler;
}
}
,teardown:function(){
	if ( this.removeEventListener ){
	for ( var i=types.length;
	i;
	){
	this.removeEventListener( types[--i],handler,false );
}
}
else{
	this.onmousewheel = null;
}
}
}
;
	$.fn.extend({
	mousewheel:function(fn){
	return fn ? this.bind("mousewheel",fn):this.trigger("mousewheel");
}
,unmousewheel:function(fn){
	return this.unbind("mousewheel",fn);
}
}
);
	function handler(event){
	var orgEvent = event || window.event,args = [].slice.call( arguments,1 ),delta = 0,returnValue = true,deltaX = 0,deltaY = 0;
	event = $.event.fix(orgEvent);
	event.type = "mousewheel";
	// Old school scrollwheel delta if ( orgEvent.wheelDelta ){
	delta = orgEvent.wheelDelta/120;
}
if ( orgEvent.detail ){
	delta = -orgEvent.detail/3;
}
// New school multidimensional scroll (touchpads) deltas deltaY = delta;
	// Gecko if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ){
	deltaY = 0;
	deltaX = -1*delta;
}
// Webkit if ( orgEvent.wheelDeltaY !== undefined ){
	deltaY = orgEvent.wheelDeltaY/120;
}
if ( orgEvent.wheelDeltaX !== undefined ){
	deltaX = -1*orgEvent.wheelDeltaX/120;
}
// Add event and delta to the front of the arguments args.unshift(event,delta,deltaX,deltaY);
	return ($.event.dispatch || $.event.handle).apply(this,args);
}
}
)(jQuery);

CSS代码(carousel.css):

.carousel{position:relative;margin:0px;padding:0px;-moz-user-select:none;-webkit-user-select:none;}
.carousel .carousel-item{background-image:url(preloader.gif);background-position:center;background-repeat:no-repeat;background-color:#FFF;position:absolute;cursor:pointer;}
.carousel .out{border:#DDD 2px solid;}
.carousel .over{border:2px solid #DDD;-moz-box-shadow:0px 0px 10px #000;-webkit-box-shadow:0px 0px 10px #000;box-shadow:0px 0px 10px #000;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=130,Color=#000000)";}
.carousel .click{border:2px solid #DDD;-moz-box-shadow:0px 0px 10px #000;-webkit-box-shadow:0px 0px 10px #000;box-shadow:0px 0px 10px #000;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=130,Color=#000000)";}
.carousel .select{border:2px solid #DDD;-moz-box-shadow:0px 0px 10px #000;-webkit-box-shadow:0px 0px 10px #000;box-shadow:0px 0px 10px #000;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=130,Color=#000000)";}
.carousel .tooltip{position:absolute;z-index:9999;background-color:#DDD;margin-bottom:20px;border:#EEE solid 4px;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;}
.carousel .tooltip p{color:#999;padding:10px;margin:0px;}
.carousel .scrollbar{width:340px;position:absolute;margin-top:100px;}
.carousel .scrollbar .track{background-image:url(track.png);width:300px;height:20px;position:absolute;left:20px;}
.carousel .scrollbar .thumb{background-image:url(thumb.png);width:70px;height:20px;position:absolute;cursor:pointer;}
.carousel .scrollbar .left{background-image:url(left.png);width:20px;height:20px;position:absolute;cursor:pointer;left:0px;}
.carousel .scrollbar .right{background-image:url(right.png);width:20px;height:20px;position:absolute;cursor:pointer;right:0px;}

CSS代码(style.css):

body{background-color:#F1F1F1;font-family:Verdana,Geneva,sans-serif;font-size:12px;color:#999;margin:0px;}
h2{font-size:16px;color:#666;text-shadow:1px 1px 1px #fff;}
#wide-wrapper{background:url(bg.jpg) repeat-x;height:600px;}
#header{width:280px;margin:0px auto;padding-top:75px;}
#carousel{width:870px;height:450px;margin:0px auto;padding:0px;}
/*arranges the images in a gridthis style will be applied only before thecarousel is instantiated or if the user doesn't havejavascript enabled;feel free to replace this style with your preferred one*/
#carousel{list-style:none;padding:0px;}
#carousel li{float:left;}
#carousel .tooltip,#carousel .bigImage,#carousel .title,#carousel .description{position:absolute;left:-9999px;}
#text{width:650px;margin:0px auto;margin-top:-20px;}
#text p{padding:5px 10px;}
#text #selected-title{width:80px;background-color:#111;font-style:italic;}
#text #selected-description{background-color:#111;}
#controls{width:234px;margin:0px auto;}
#controls a{margin:0px 20px;cursor:pointer;}
#controls #left{background:url(arrows.png);width:38px;height:38px;float:left;}
#controls #right{background:url(arrows.png) -38px 0px;width:38px;height:38px;float:left;}
#controls #auto-scroll{background:url(playpause.png);width:38px;height:38px;float:left;}
#example-description{margin:0px;padding:0px;background-color:#DDD;border-top:solid 1px #CCC;border-bottom:solid 1px #CCC;}
#example-description p{color:#666;font-style:italic;width:750px;margin:0px auto;padding:10px 0px;}
#example-description #navigation{width:300px;height:25px;margin:10px auto 0px;}
#example-description #navigation a{background-color:#F1F1F1;text-decoration:none;color:#666;padding:5px 10px;margin:0px 5px;border:#CCC solid 1px;}

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