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

jQuery椭圆型旋转插件js代码

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

以下是 jQuery椭圆型旋转插件js代码 的示例演示效果:

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

部分效果截图:

jQuery椭圆型旋转插件js代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>jQuery��Բ����ת���</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="js/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/site.css" type="text/css" rel="stylesheet" />
<link href="css/vortex.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.vortex.js"></script>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript">
	$(window).load(function() {

		$('#vortex').vortex({
			speed : 60,
			manualAdvance : true,
			initialPosition : 270
		});
		$('#vortex-deep-example').vortex({
			speed : 200,
			manualAdvance : false,
			deepFactor : 0
		});

	});
</script>
</head>
<body onload="prettyPrint();">
<header class="jumbotron subhead">
<div class="container">
</div>
</header>
<br />
<div class="container well">
	<div class="span5 control-panel">
		<button id="vortex-start" class="btn" type="button" onclick="$('#vortex').data('vortex').start();">
		Start</button><br />
		<button id="vortex-stop" class="btn" type="button" onclick="$('#vortex').data('vortex').stop();">
		Stop</button><br />
		<button id="vortex-clockwise" class="btn" type="button" onclick="$('#vortex').data('vortex').setClockwise(true);">
		Clockwise</button><br />
		<button id="vortex-counterclockwise" class="btn" type="button" onclick="$('#vortex').data('vortex').setClockwise(false);">
		Counterclockwise</button><br />
		<button id="vortex-step-1" class="btn" type="button" onclick="$('#vortex').data('vortex').step(1);">
		1 step</button><br />
		<button id="vortex-step-3" class="btn" type="button" onclick="$('#vortex').data('vortex').step(3);">
		3 step</button><br />
		<button id="vortex-reset" class="btn" type="button" onclick="$('#vortex').data('vortex').reset();">
		Reset</button><br />
		<button id="vortex-speed-10" class="btn" type="button" onclick="$('#vortex').data('vortex').setSpeed(10);">
		Set speed 10</button><br />
		<button id="vortex-speed-50" class="btn" type="button" onclick="$('#vortex').data('vortex').setSpeed(50);">
		Set speed 50</button><br />
		<button id="vortex-speed-1000" class="btn" type="button" onclick="$('#vortex').data('vortex').setSpeed(1000);">
		Set speed 1000</button><br />
	</div>
	<div class="span6">
		<!-- 			<hr id="center-line" /> -->
		<div id="vortex">
			<div class="square-button first">
			</div>
			<div class="square-button">
			</div>
			<div class="square-button">
			</div>
			<div class="square-button">
			</div>
			<div class="square-button">
			</div>
			<div class="square-button">
			</div>
			<div class="square-button">
			</div>
			<div class="square-button">
			</div>
			<div class="square-button">
			</div>
			<div class="square-button">
			</div>
			<div class="square-button">
			</div>
		</div>
	</div>
</div>
</body>
</html>

JS代码(jquery.vortex.js):

/*! jQuery Vortex 1.0.6 | by Luca Fagioli - Montezuma Interactive | http://www.apache.org/licenses/LICENSE-2.0 */
(function($){
	var Vortex = function(element,options){
	var kids;
	var animationIntervalId = 0;
	var isAnimating = false;
	var vortex = $(element);
	var positions = [];
	var kidsPositionIndexes = [];
	var vortexInstance = this;
	var stepCounter = -1;
	var initialPositions = [];
	var reset = false;
	var originalKidsSize = [];
	var speedDelay = 0;
	var children = [];
	var positionsRadiants = [];
	var settings = $.extend({
	speed:50,clockwise:true,manualAdvance:false,beforeAnimation:null,afterAnimation:null,easing:'end',deepFactor:0.5,initialPosition:90}
,options ||{
}
);
	var vortexHalfHeight = vortex.height() / 2;
	var vortexHalfWidth = vortex.width() / 2;
	kids = vortex.children().css("position","absolute");
	var positionsCount = kids.length * 12;
	var stepLength = 1;
	var radiantFactor = (positionsCount / 2) / Math.PI;
	for ( var i = 0;
	i < positionsCount;
	i++){
	positionsRadiants[i] = (Math.PI * 2) * i / positionsCount;
}
var offsetPosition = 0;
	switch (settings.initialPosition){
	case 90:offsetPosition = Math.PI * 1.5;
	break;
	case 0:offsetPosition = 0;
	break;
	case 180:offsetPosition = Math.PI;
	break;
	case 270:offsetPosition = Math.PI * 0.5;
	break;
}
kids.each(function(i){
	originalKidsSize[i] ={
	width:$(this).width(),height:$(this).height()}
;
	var kidHalfHeight = $(this).height() / 2;
	var kidHalfWidth = $(this).width() / 2;
	var kidPositions = [];
	for ( var j = 0;
	j < positionsCount;
	j += 1){
	kidPositions.push({
	top:((1 + Math.sin(offsetPosition+ (j / radiantFactor))) * vortexHalfHeight)- kidHalfHeight,left:vortexHalfWidth* (1 + Math.cos(offsetPosition+ (j / radiantFactor)))- kidHalfWidth}
);
}
var positionIndex = i* Math.round(positionsCount / kids.length);
	kidsPositionIndexes[i] = positionIndex;
	var radiantVariable = (Math.sin(offsetPosition+ positionsRadiants[positionIndex]) * settings.deepFactor);
	var resizeFactor = (1 + radiantVariable);
	var newWidth = originalKidsSize[i].width * resizeFactor;
	var newHeight = originalKidsSize[i].height * resizeFactor;
	$(this).css({
	"width":newWidth,"height":newHeight,"top":kidPositions[positionIndex].top- ((newHeight - (originalKidsSize[i].height)) / 2),"left":kidPositions[positionIndex].left- ((newWidth - (originalKidsSize[i].width)) / 2),"z-index":200 + Math.round(100 * (Math.sin(offsetPosition+ positionsRadiants[positionIndex])))}
);
	initialPositions[i] = positionIndex;
	positions.push(kidPositions);
}
);
	this.stop = function(){
	clearInterval(animationIntervalId);
	kids.stop();
	setAnimating(false);
}
;
	this.setClockwise = function(clockwise){
	settings.clockwise = clockwise;
	if (isAnimating){
	this.start();
}
}
;
	var setAnimating = function(animating){
	isAnimating = animating;
	if (isAnimating === true){
	vortex.addClass("vortex-animating");
	if (settings.beforeAnimation){
	if (settings.beforeAnimation.call() === false)return false;
}
}
else{
	vortex.removeClass("vortex-animating");
	if (settings.afterAnimation)settings.afterAnimation.call(null,$(this));
}
}
;
	this.isAnimating = function(){
	return isAnimating;
}
;
	this.reset = function(){
	if (kidsPositionIndexes[0] == initialPositions[0])return;
	reset = true;
	this.start();
}
;
	this.start = function(repetitions){
	this.stop();
	speedDelay = 0;
	setAnimating(true);
	var positionStep;
	if (settings.clockwise === true){
	positionStep = +stepLength;
}
else{
	positionStep = -stepLength;
}
var startAnimation = function(kid,kidIndex){
	var kidPositions = positions[kidIndex];
	var positionIndex = (kidsPositionIndexes[kidIndex] + positionStep);
	if (positionIndex < 0)positionIndex = positionsCount - Math.abs(positionStep);
	if (positionIndex > positionsCount - 1)positionIndex = 0;
	var resizeFactor = (1 + Math.sin(offsetPosition+ positionsRadiants[positionIndex])* settings.deepFactor);
	var newWidth = originalKidsSize[kidIndex].width * resizeFactor;
	var newHeight = originalKidsSize[kidIndex].height* resizeFactor;
	kid.animate({
	"left":kidPositions[positionIndex].left- ((newWidth - (originalKidsSize[kidIndex].width)) / 2),"top":kidPositions[positionIndex].top- ((newHeight - (originalKidsSize[kidIndex].height)) / 2),"width":newWidth,"height":newHeight,"z-index":200 + Math.round(100 * (Math.sin(offsetPosition+ positionsRadiants[positionIndex])))}
,{
	duration:settings.speed + speedDelay,easing:"linear",queue:false,complete:function(){
	kidsPositionIndexes[kidIndex] = positionIndex;
	if (kidIndex == kids.length - 1){
	stepCounter--;
	if (stepCounter == 2){
	speedDelay = settings.speed * 2;
}
}
if (vortexInstance.isAnimating()){
	if (reset == false|| initialPositions[kidIndex] != positionIndex){
	if (stepCounter == 0){
	vortexInstance.stop();
	stepCounter = -1;
	return;
}
startAnimation(kid,kidIndex);
}
else{
	if (kidIndex == kids.length - 1){
	vortexInstance.stop();
	reset = false;
}
}
}
}
}
);
}
;
	kids.each(function(i){
	startAnimation($(this),i);
}
);
}
;
	this.setSpeed = function(speed){
	settings.speed = speed;
	if (isAnimating){
	this.start();
}
}
;
	if (!settings.manualAdvance){
	this.start();
}
this.step = function(steps){
	stepCounter = (steps * positionsCount / kids.length);
	this.start();
	return;
}
;
}
;
	$.fn.vortex = function(options){
	return this.each(function(){
	var element = $(this);
	if (element.data('vortex'))return;
	var vortex = new Vortex(this,options);
	element.data('vortex',vortex);
}
);
}
;
}
)(jQuery);

CSS代码(prettify.css):

.com{color:#93a1a1;}
.lit{color:#195f91;}
.pun,.opn,.clo{color:#93a1a1;}
.fun{color:#dc322f;}
.str,.atv{color:#D14;}
.kwd,.prettyprint .tag{color:#1e347b;}
.typ,.atn,.dec,.var{color:teal;}
.pln{color:#48484c;}
.prettyprint{padding:8px;background-color:#f7f7f9;border:1px solid #e1e1e8;}
.prettyprint.linenums{-webkit-box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0;-moz-box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0;box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0;}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums{margin:0 0 0 33px;/* IE indents via margin-left */
}
ol.linenums li{padding-left:12px;color:#bebec5;line-height:20px;text-shadow:0 1px 0 #fff;}

CSS代码(site.css):

@CHARSET "UTF-8";#vortex{margin:auto;margin-top:30px;}
div.control-panel button{margin-bottom:10px;width:250px;}
/* Subhead (other pages)------------------------- */
.subhead{text-align:left;border-bottom:1px solid #ddd;}
.subhead h1{font-size:60px;}
.subhead p{margin-bottom:20px;}
.subhead .navbar{display:none;}
/* Jumbotrons-------------------------------------------------- */
/* Base class------------------------- */
.jumbotron{position:relative;padding:10px 0;color:#fff;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.4),0 0 30px rgba(0,0,0,.075);background:#3f4c6b;/* Old browsers */
background:-moz-linear-gradient(top,#3f4c6b 0%,#3f4c6b 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3f4c6b),color-stop(100%,#3f4c6b) );/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#3f4c6b 0%,#3f4c6b 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#3f4c6b 0%,#3f4c6b 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#3f4c6b 0%,#3f4c6b 100%);/* IE10+ */
background:linear-gradient(to bottom,#3f4c6b 0%,#3f4c6b 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b',endColorstr='#3f4c6b',GradientType=0 );/* IE6-9 */
}
.jumbotron h1{font-size:80px;font-weight:bold;letter-spacing:-1px;line-height:1;}
.jumbotron p{font-size:24px;font-weight:300;line-height:1.25;margin-bottom:30px;}
/* Link styles (used on .masthead-links as well) */
.jumbotron a{color:#fff;color:rgba(255,255,255,.5);-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
.jumbotron a:hover{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.25);}
/* Download button */
.masthead .btn{padding:19px 24px;font-size:24px;font-weight:200;color:#fff;/* redeclare to override the `.jumbotron a` */
border:0;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 5pxrgba(0,0,0,.25);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 5pxrgba(0,0,0,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 5pxrgba(0,0,0,.25);-webkit-transition:none;-moz-transition:none;transition:none;}
.masthead .btn:hover{-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 5pxrgba(0,0,0,.25);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 5pxrgba(0,0,0,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 5pxrgba(0,0,0,.25);}
.masthead .btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.1),0 1px 0rgba(255,255,255,.1);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,.1),0 1px 0rgba(255,255,255,.1);box-shadow:inset 0 2px 4px rgba(0,0,0,.1),0 1px 0rgba(255,255,255,.1);}
/* Pattern overlay------------------------- */
.jumbotron .container{position:relative;z-index:2;}
.jumbotron:after{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:none repeat center center;opacity:.4;}
@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1){.jumbotron:after{background-size:150px 150px;}
}
/* Footer-------------------------------------------------- */
.footer{text-align:center;padding:30px 0;margin-top:70px;border-top:1px solid #e5e5e5;background-color:#f5f5f5;}
.footer p{margin-bottom:0;color:#777;}
.footer-links{margin:10px 0;}
.footer-links li{display:inline;padding:0 2px;}
.footer-links li:first-child{padding-left:0;}
#github{position:absolute;right:0;top:0;z-index:1000;}
#vortex a{width:200px;}
#vortex a img{width:100%;height:100%;}
.square-button:nth-child(even){height:70px;position:absolute;width:70px;background:rgb(63,76,107);/* Old browsers */
background:-moz-linear-gradient(top,rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100% );/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(63,76,107,1) ),color-stop(100%,rgba(63,76,107,1) ) );/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100% );/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100% );/* Opera 11.10+ */
background:-ms-linear-gradient(top,rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100% );/* IE10+ */
background:linear-gradient(to bottom,rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100% );/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b',endColorstr='#3f4c6b',GradientType=0 );/* IE6-9 */
}
.square-button:nth-child(odd){height:70px;position:absolute;width:70px;background:rgb(96,108,136);/* Old browsers */
background:-moz-linear-gradient(top,rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(96,108,136,1)),color-stop(100%,rgba(63,76,107,1)));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);/* IE10+ */
background:linear-gradient(to bottom,rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88',endColorstr='#3f4c6b',GradientType=0 );/* IE6-9 */
}
#vortex .square-button div.number{font-size:12px;font-weight:bold;color:#fff;display:block;margin:auto;text-align:center;position:relative;top:25px;}
#vortex .square-button.first{background:#ffa84c;/* Old browsers */
background:-moz-linear-gradient(top,#ffa84c 0%,#ff7b0d 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffa84c),color-stop(100%,#ff7b0d) );/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#ffa84c 0%,#ff7b0d 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#ffa84c 0%,#ff7b0d 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#ffa84c 0%,#ff7b0d 100%);/* IE10+ */
background:linear-gradient(to bottom,#ffa84c 0%,#ff7b0d 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c',endColorstr='#ff7b0d',GradientType=0 );/* IE6-9 */
}
#vortex.vortex-animating>*{background:rgb(136,191,232);/* Old browsers */
background:-moz-linear-gradient(top,rgba(136,191,232,1) 0%,rgba(112,176,224,1) 100% );/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(136,191,232,1) ),color-stop(100%,rgba(112,176,224,1) ) );/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,rgba(136,191,232,1) 0%,rgba(112,176,224,1) 100% );/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,rgba(136,191,232,1) 0%,rgba(112,176,224,1) 100% );/* Opera 11.10+ */
background:-ms-linear-gradient(top,rgba(136,191,232,1) 0%,rgba(112,176,224,1) 100% );/* IE10+ */
background:linear-gradient(to bottom,rgba(136,191,232,1) 0%,rgba(112,176,224,1) 100% );/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8',endColorstr='#70b0e0',GradientType=0 );/* IE6-9 */
}
#vortex-deep-example .square-button{width:60px;height:60px;border-radius:30px;}
#vortex-deep-example{width:150px;height:150px;position:relative;z-index:0;margin:40px auto 40px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
107.60 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
107.60 KB
立即下载
孔芝
了解
打赏作者 鼓励作者
jquery特效5
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章