经验分享程序开发文档资料数据资源其它资源

3D图片层叠旋转木马切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 3D图片层叠旋转木马切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

3D图片层叠旋转木马切换特效代码

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" />
<title>3D图片层叠旋转木马切换</title>
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.roundabout-1.0.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript">		
$(document).ready(function(){ 
	$('#featured-area ul').roundabout({
		easing: 'easeOutInCirc',
		duration: 600
	});
});
</script>
</head> 
<body>
<div id="featured-area"> 
	<ul> 
		<li><a href="#"><span>代码素材</span><img src="images/speedometer.jpg" alt="代码素材" /></a></li>
		<li><a href="#"><span>PSD素材</span><img src="images/photoshop_plus.jpg" alt="PSD素材" /></a></li>  
		<li><a href="#"><span>flash素材</span><img src="images/fnfast.jpg" alt="flash素材" /></a></li>  
	</ul> 
</div>
</body> 
</html>

JS代码(jquery.roundabout-1.0.min.js):

jQuery.extend({
	roundabout_shape:{
	def:'lazySusan',lazySusan:function(r,a,t){
	return{
	x:Math.sin(r+a),y:(Math.sin(r+3*Math.PI/2+a)/8)*t,z:(Math.cos(r+a)+1)/2,scale:(Math.sin(r+Math.PI/2+a)/2)+0.5}
}
}
}
);
	jQuery.fn.roundabout=function(){
	var options=(typeof arguments[0]!='object')?{
}
:arguments[0];
	options={
	bearing:(typeof options.bearing=='undefined')?0.0:parseFloat(options.bearing%360.0,4),tilt:(typeof options.tilt=='undefined')?0.0:parseFloat(options.tilt,4),minZ:(typeof options.minZ=='undefined')?100:parseInt(options.minZ,10),maxZ:(typeof options.maxZ=='undefined')?400:parseInt(options.maxZ,10),minOpacity:(typeof options.minOpacity=='undefined')?0.40:parseFloat(options.minOpacity,2),maxOpacity:(typeof options.maxOpacity=='undefined')?1.00:parseFloat(options.maxOpacity,2),minScale:(typeof options.minScale=='undefined')?0.40:parseFloat(options.minScale,2),maxScale:(typeof options.maxScale=='undefined')?1.00:parseFloat(options.maxScale,2),duration:(typeof options.duration=='undefined')?600:parseInt(options.duration,10),btnNext:options.btnNext||null,btnPrev:options.btnPrev||null,easing:options.easing||'swing',clickToFocus:(options.clickToFocus!==false),focusBearing:(typeof options.focusBearing=='undefined')?0.0:parseFloat(options.focusBearing%360.0,4),shape:options.shape||'lazySusan',debug:options.debug||false,childSelector:options.childSelector||'li',startingChild:(typeof options.startingChild=='undefined')?null:parseInt(options.startingChild,10)}
;
	this.each(function(i){
	var ref=jQuery(this);
	var childSelector=options.childSelector;
	var children=ref.children(childSelector);
	var period=360.0/children.length;
	var startingBearing=(options.startingChild===null)?options.bearing:options.startingChild*period;
	ref.addClass('roundabout-holder').css('padding',0).css('position','relative').css('z-index',options.minZ).attr('bearing',startingBearing).attr('tilt',options.tilt).attr('minZ',options.minZ).attr('maxZ',options.maxZ).attr('minOpacity',options.minOpacity).attr('maxOpacity',options.maxOpacity).attr('minScale',options.minScale).attr('maxScale',options.maxScale).attr('duration',options.duration).attr('easing',options.easing).attr('clickToFocus',options.clickToFocus).attr('focusBearing',options.focusBearing).attr('animating','0').attr('childInFocus',-1).attr('shape',options.shape).attr('period',period).attr('debug',options.debug).attr('childSelector',options.childSelector);
	children.each(function(i){
	var degrees=period*i;
	var startPos;
	jQuery(this).addClass('roundabout-moveable-item').css('position','absolute').attr('degrees',degrees);
	startPos=[jQuery(this).width(),jQuery(this).height(),parseInt(jQuery(this).css('font-size'),10)];
	jQuery(this).attr('startPos',startPos.join(','));
	if(options.clickToFocus===true){
	jQuery(this).click(function(e){
	if(!jQuery.roundabout_isInFocus(ref,degrees)){
	e.preventDefault();
	if(ref.attr('animating')=='0'){
	ref.roundabout_animateAngleToFocus(degrees)}
return false}
}
)}
}
);
	if(options.btnNext){
	jQuery(options.btnNext).click(function(e){
	e.preventDefault();
	if(ref.attr('animating')=='0'){
	ref.roundabout_animateToNextChild()}
return false}
)}
if(options.btnPrev){
	jQuery(options.btnPrev).click(function(e){
	e.preventDefault();
	if(ref.attr('animating')=='0'){
	ref.roundabout_animateToPreviousChild()}
return false}
)}
ref.roundabout_updateChildPositions()}
);
	return this}
;
	jQuery.fn.roundabout_setTilt=function(newTilt){
	this.each(function(i){
	jQuery(this).attr('tilt',newTilt);
	jQuery(this).roundabout_updateChildPositions()}
);
	return this}
;
	jQuery.fn.roundabout_setBearing=function(newBearing){
	this.each(function(i){
	jQuery(this).attr('bearing',parseFloat(newBearing%360,4));
	jQuery(this).roundabout_updateChildPositions()}
);
	if(typeof arguments[1]==='function'){
	var callback=arguments[1];
	setTimeout(function(){
	callback()}
,0)}
return this}
;
	jQuery.fn.roundabout_adjustBearing=function(delta){
	delta=parseFloat(delta,4);
	if(delta!==0){
	this.each(function(i){
	jQuery(this).attr('bearing',jQuery.roundabout_getBearing(jQuery(this))+delta);
	jQuery(this).roundabout_updateChildPositions()}
)}
return this}
;
	jQuery.fn.roundabout_adjustTilt=function(delta){
	delta=parseFloat(delta,4);
	this.each(function(i){
	jQuery(this).attr('tilt',parseFloat(jQuery(this).attr('tilt'),4)+delta);
	jQuery(this).roundabout_updateChildPositions()}
);
	return this}
;
	jQuery.fn.roundabout_animateToBearing=function(bearing){
	bearing=parseFloat(bearing,4);
	var currentTime=new Date();
	var data=(typeof arguments[3]!=='object')?null:arguments[3];
	var duration=(typeof arguments[1]=='undefined')?null:arguments[1];
	var easingType=(typeof arguments[2]!='undefined')?arguments[2]:null;
	this.each(function(i){
	var ref=jQuery(this),timer,easingFn,newBearing;
	var thisDuration=(duration===null)?parseInt(ref.attr('duration'),10):duration;
	var thisEasingType=(easingType!==null)?easingType:ref.attr('easing')||'swing';
	if(data===null){
	data={
	timerStart:currentTime,start:jQuery.roundabout_getBearing(ref),totalTime:thisDuration}
}
timer=currentTime-data.timerStart;
	if(timer<thisDuration){
	ref.attr('animating','1');
	if(typeof jQuery.easing.def=='string'){
	easingFn=jQuery.easing[thisEasingType]||jQuery.easing[jQuery.easing.def];
	newBearing=easingFn(null,timer,data.start,bearing-data.start,data.totalTime)}
else{
	newBearing=jQuery.easing[thisEasingType]((timer/data.totalTime),timer,data.start,bearing-data.start,data.totalTime)}
ref.roundabout_setBearing(newBearing,function(){
	ref.roundabout_animateToBearing(bearing,thisDuration,thisEasingType,data)}
)}
else{
	bearing=(bearing<0)?bearing+360:bearing%360;
	ref.attr('animating','0');
	ref.roundabout_setBearing(bearing)}
}
);
	return this}
;
	jQuery.fn.roundabout_animateToDelta=function(delta){
	var duration,easing;
	if(typeof arguments[1]!=='undefined'){
	duration=arguments[1]}
if(typeof arguments[2]!=='undefined'){
	easing=arguments[2]}
this.each(function(i){
	delta=jQuery.roundabout_getBearing(jQuery(this))+delta;
	jQuery(this).roundabout_animateToBearing(delta,duration,easing)}
);
	return this}
;
	jQuery.fn.roundabout_animateToChild=function(childPos){
	var duration,easing;
	if(typeof arguments[1]!=='undefined'){
	duration=arguments[1]}
if(typeof arguments[2]!=='undefined'){
	easing=arguments[2]}
this.each(function(i){
	var ref=jQuery(this);
	if(parseInt(ref.attr('childInFocus'),10)!==childPos&&ref.attr('animating','0')){
	var child=jQuery(ref.children(ref.attr('childSelector'))[childPos]);
	ref.roundabout_animateAngleToFocus(parseFloat(child.attr('degrees'),4),duration,easing)}
}
);
	return this}
;
	jQuery.fn.roundabout_animateToNextChild=function(){
	var duration,easing;
	if(typeof arguments[0]!=='undefined'){
	duration=arguments[0]}
if(typeof arguments[1]!=='undefined'){
	easing=arguments[1]}
this.each(function(i){
	if(jQuery(this).attr('animating','0')){
	var bearing=360.0-jQuery.roundabout_getBearing(jQuery(this));
	var period=parseFloat(jQuery(this).attr('period'),4),j=0,range;
	while(true){
	range={
	lower:period*j,upper:period*(j+1)}
;
	if(bearing<=range.upper&&bearing>range.lower){
	jQuery(this).roundabout_animateToDelta(bearing-range.lower,duration,easing);
	break}
j++}
}
}
);
	return this}
;
	jQuery.fn.roundabout_animateToPreviousChild=function(){
	var duration,easing;
	if(typeof arguments[0]!=='undefined'){
	duration=arguments[0]}
if(typeof arguments[1]!=='undefined'){
	easing=arguments[1]}
this.each(function(i){
	if(jQuery(this).attr('animating','0')){
	var bearing=360.0-jQuery.roundabout_getBearing(jQuery(this));
	var period=parseFloat(jQuery(this).attr('period'),4),j=0,range;
	while(true){
	range={
	lower:period*j,upper:period*(j+1)}
;
	if(bearing>=range.lower&&bearing<range.upper){
	jQuery(this).roundabout_animateToDelta(bearing-range.upper,duration,easing);
	break}
j++}
}
}
);
	return this}
;
	jQuery.fn.roundabout_animateAngleToFocus=function(target){
	var duration,easing;
	if(typeof arguments[1]!=='undefined'){
	duration=arguments[1]}
if(typeof arguments[2]!=='undefined'){
	easing=arguments[2]}
this.each(function(i){
	var delta=jQuery.roundabout_getBearing(jQuery(this))-target;
	delta=(Math.abs(360.0-delta)<Math.abs(0.0-delta))?360.0-delta:0.0-delta;
	delta=(delta>180)?-(360.0-delta):delta;
	if(delta!==0){
	jQuery(this).roundabout_animateToDelta(delta,duration,easing)}
}
);
	return this}
;
	jQuery.fn.roundabout_updateChildPositions=function(){
	this.each(function(i){
	var ref=jQuery(this);
	var inFocus=-1;
	var data={
	bearing:jQuery.roundabout_getBearing(ref),tilt:parseFloat(ref.attr('tilt'),4),stage:{
	width:Math.floor(ref.width()*0.9),height:Math.floor(ref.height()*0.9)}
,animating:ref.attr('animating'),inFocus:parseInt(ref.attr('childInFocus'),10),focusBearingRad:jQuery.roundabout_degToRad(parseFloat(ref.attr('focusBearing'),4)),shape:jQuery.roundabout_shape[ref.attr('shape')]||jQuery.roundabout_shape[jQuery.roundabout_shape.def]}
;
	data.midStage={
	width:data.stage.width/2,height:data.stage.height/2}
;
	data.nudge={
	width:data.midStage.width+data.stage.width*0.05,height:data.midStage.height+data.stage.height*0.05}
;
	data.zValues={
	min:parseInt(ref.attr('minZ'),10),max:parseInt(ref.attr('maxZ'),10)}
;
	data.zValues.diff=data.zValues.max-data.zValues.min;
	data.opacity={
	min:parseFloat(ref.attr('minOpacity'),2),max:parseFloat(ref.attr('maxOpacity'),2)}
;
	data.opacity.diff=data.opacity.max-data.opacity.min;
	data.scale={
	min:parseFloat(ref.attr('minScale'),2),max:parseFloat(ref.attr('maxScale'),2)}
;
	data.scale.diff=data.scale.max-data.scale.min;
	ref.children(ref.attr('childSelector')).each(function(i){
	if(jQuery.roundabout_updateChildPosition(jQuery(this),ref,data,i)&&data.animating=='0'){
	inFocus=i;
	jQuery(this).addClass('roundabout-in-focus')}
else{
	jQuery(this).removeClass('roundabout-in-focus')}
}
);
	if(inFocus!==data.inFocus){
	jQuery.roundabout_triggerEvent(ref,data.inFocus,'blur');
	if(inFocus!==-1){
	jQuery.roundabout_triggerEvent(ref,inFocus,'focus')}
ref.attr('childInFocus',inFocus)}
}
);
	return this}
;
	jQuery.roundabout_getBearing=function(el){
	return parseFloat(el.attr('bearing'),4)%360}
;
	jQuery.roundabout_degToRad=function(degrees){
	return(degrees%360.0)*Math.PI/180.0}
;
	jQuery.roundabout_isInFocus=function(el,target){
	return(jQuery.roundabout_getBearing(el)%360===(target%360))}
;
	jQuery.roundabout_triggerEvent=function(el,child,eventType){
	return(child<0)?this:jQuery(el.children(el.attr('childSelector'))[child]).trigger(eventType)}
;
	jQuery.roundabout_updateChildPosition=function(child,container,data,childPos){
	var ref=jQuery(child),out=[];
	var startPos=ref.attr('startPos').split(',');
	var itemData={
	startWidth:startPos[0],startHeight:startPos[1],startFontSize:startPos[2],degrees:parseFloat(ref.attr('degrees'),4)}
;
	var rad=jQuery.roundabout_degToRad((360.0-itemData.degrees)+data.bearing);
	while(rad<0){
	rad=rad+Math.PI*2}
while(rad>Math.PI*2){
	rad=rad-Math.PI*2}
var factors=data.shape(rad,data.focusBearingRad,data.tilt);
	factors.scale=(factors.scale>1)?1:factors.scale;
	factors.adjustedScale=(data.scale.min+(data.scale.diff*factors.scale)).toFixed(4);
	factors.width=factors.adjustedScale*itemData.startWidth;
	factors.height=factors.adjustedScale*itemData.startHeight;
	ref.css('left',((factors.x*data.midStage.width+data.nudge.width)-factors.width/2.0).toFixed(2)+'px').css('top',((factors.y*data.midStage.height+data.nudge.height)-factors.height/2.0).toFixed(2)+'px').css('width',factors.width.toFixed(2)+'px').css('height',factors.height.toFixed(2)+'px').css('opacity',(data.opacity.min+(data.opacity.diff*factors.scale)).toFixed(2)).css('z-index',parseInt(data.zValues.min+(data.zValues.diff*factors.z),10)).css('font-size',(factors.adjustedScale*itemData.startFontSize).toFixed(2)+'px').attr('current-scale',factors.adjustedScale);
	if(container.attr('debug')=='true'){
	out.push('<div style="font-weight:normal;
	font-size:10px;
	padding:2px;
	width:'+ref.css('width')+';
	background-color:#ffc;
	">');
	out.push('<strong style="font-size:12px;
	white-space:nowrap;
	">Child '+childPos+'</strong><br />');
	out.push('<strong>left:</strong> '+ref.css('left')+'<br /><strong>top:</strong> '+ref.css('top')+'<br />');
	out.push('<strong>width:</strong> '+ref.css('width')+'<br /><strong>opacity:</strong> '+ref.css('opacity')+'<br />');
	out.push('<strong>z-index:</strong> '+ref.css('z-index')+'<br /><strong>font-size:</strong> '+ref.css('font-size')+'<br />');
	out.push('<strong>scale:</strong> '+ref.attr('current-scale'));
	out.push('</div>');
	ref.html(out.join(''))}
return jQuery.roundabout_isInFocus(container,itemData.degrees)}
;

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-family:Verdana,Geneva,sans-serif;background:#eeeeee;font-size:12px;}
/* featured-area */
#featured-area{height:337px;width:950px;margin:40px auto 0 auto;}
.roundabout-holder{list-style:none;width:500px;height:300px;margin:0px auto;}
.roundabout-moveable-item{font-size:12px!important;height:300px;width:600px;cursor:pointer;padding:5px;border:1px solid #aaaaaa;-webkit-border-radius:5px;-moz-border-radius:5px;background:#f9f9f9;}
.roundabout-moveable-item img{height:100%;width:100%;background-color:#FFFFFF;margin:0;}
.roundabout-in-focus{cursor:auto;}
.roundabout-in-focus:hover{-webkit-box-shadow:0px 0px 20px #787878;-moz-box-shadow:0px 0px 20px #787878;background:#f9f9f9;}
.roundabout-holder span{display:none;}
.roundabout-in-focus:hover span{display:inline;position:absolute;bottom:5px;right:5px;padding:8px 20px;background:#f9f9f9;color:#3366cc;z-index:999;-webkit-border-top-left-radius:5px;-moz-border-radius-topLeft:5px;border-left:1px solid #aaaaaa;border-top:1px solid #aaaaaa;}
.roundabout a:active,.roundabout a:focus,.roundabout a:visited{outline:none;text-decoration:none;}
.roundabout li{margin:0}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
177.57 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
177.57 KB
立即下载
严勤怡珊
了解
打赏作者 鼓励作者
Html Js 图片切换触摸4
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章