兼容各大主流浏览器的旋转导航代码,JS代码库,德仔网

代码语言

代码分类

【JS】兼容各大主流浏览器的旋转导航

作者:亭 / 发布于2014/11/11/ 949

最近在工作中遇到这样的需求，今天有空把代码整理了下，自己做了一个小DEMO，该DEMO中包含两种方式的旋转效果，示例一是使用KISSY实现的，旋转对象是各个小导航图标；示例二是KISSY+CSS3实现的，旋转对象是中间的带指针的圆。两个示例均兼容IE6-9，Firefox，Chrome等各大主流浏览器，需要说明的是示例二中由于IE对CSS3的不兼容，所以在IE中失去平滑效果，喜欢的朋友可以去看看。


	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Rotate-Nav</title>
	<style>
	/*common start*/
	.rotate{
	 position:relative;
	 margin:10px auto 0;
	 width:351px;
	 height:351px;
	 background:url(rotate-icon.png) no-repeat 0 0;
	}
	.rotate .rt-bg{
	 position:absolute;
	 left:50%;
	 top:50%;
	 margin-left:-99px;
	 margin-top:-99px;
	 width:199px;
	 height:199px;
	 background:url(rotate-icon.png) no-repeat -199px -415px;
	}
	.rotate .item{
	 position:absolute;
	 left:159px;
	 top:25px;
	 width:32px;
	 height:32px;
	 background:url(rotate-icon.png) no-repeat -9999px -9999px;
	 cursor:pointer;
	}
	/*common end*/
	/*JS实现 Start*/
	.js-rotate .item1{background-position:0 -351px;}
	.js-rotate-1 .item1{background-position:0 -383px;}
	.js-rotate .item2{background-position:-32px -351px;}
	.js-rotate-2 .item2{background-position:-32px -383px;}
	.js-rotate .item3{background-position:-64px -351px;}
	.js-rotate-3 .item3{background-position:-64px -383px;}
	.js-rotate .item4{background-position:-96px -351px;}
	.js-rotate-4 .item4{background-position:-96px -383px;}
	.js-rotate .item5{background-position:-128px -351px;}
	.js-rotate-5 .item5{background-position:-128px -383px;}
	.js-rotate .item6{background-position:-160px -351px;}
	.js-rotate-6 .item6{background-position:-160px -383px;}
	/*JS实现 End*/
	</style>
	</head>
	<body>
	<div class="rotate js-rotate" id="js-rotate">
	 <i class="rt-bg"></i>
	 <span class="item item1"></span>
	 <span class="item item2"></span>
	 <span class="item item3"></span>
	 <span class="item item4"></span>
	 <span class="item item5"></span>
	 <span class="item item6"></span>
	</div>
	<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script>
	<script>
	(function(S){
	 var D = S.DOM,E = S.Event;
	 var c = {"x":191,"y":191},r = 130,pi = Math.PI,a = pi / 180;
	 var ns = D.query("#js-rotate .item"),len = ns.length,size = {"w":32,"h":32};
	 var alpha = Math.floor(360 / len),delta = 30,dest = 360 + delta;
	 var op = D.get("#js-rotate"),cls = D.prop(op,"class");
	 S.each(ns,function(items){
	 var i = S.indexOf(items,ns);
	 items.alpha = i * alpha + delta;
	 D.css(items,"left",Math.floor(c.x + r * Math.cos(items.alpha * a) - size.w) + "px");
	 D.css(items,"top",Math.floor(c.y - r * Math.sin(items.alpha * a) - size.h) + "px");
	 });
	 D.prop(op,"class",cls + " js-rotate-1");
	 E.on(ns,"click",function(){
	 var i = S.indexOf(this,ns);
	 mc = dest - this.alpha;
	 if(mc == 360){return;}
	 D.prop(op,"class",cls + " js-rotate-" + (i + 1));
	 var j = 0;
	 var _t = setInterval(function(){
	 if(j <= mc){
	 S.each(ns,function(cld){
	 D.css(cld,"left",Math.floor(c.x + r * Math.cos((cld.alpha + j) * a) - size.w) + "px");
	 D.css(cld,"top",Math.floor(c.y - r * Math.sin((cld.alpha + j) * a) - size.h) + "px");
	 });
	 j += 5;
	 }else{
	 S.each(ns,function(cld){
	 cld.alpha += mc;
	 if(cld.alpha > 360){cld.alpha -= 360;}
	 });
	 clearInterval(_t);
	 }
	 },10);
	 });
	})(KISSY);
	</script>
	<style>
	/*CSS实现 Start*/
	.css-rotate .rt-bg{
	 -moz-transition:all 0.2s ease-in;
	 -webkit-transition:all 0.2s ease-in;
	 -o-transition:all 0.2s ease-in;
	 transition:all 0.2s ease-in;
	}
	.css-rotate .item1{left:271px;top:94px;background-position:0 -351px;}
	.css-rotate-1 .item1{background-position:0 -383px;}
	.css-rotate .item2{left:159px;top:29px;background-position:-32px -351px;}
	.css-rotate-2 .item2{background-position:-32px -383px;}
	.css-rotate .item3{left:46px;top:94px;background-position:-64px -351px;}
	.css-rotate-3 .item3{background-position:-64px -383px;}
	.css-rotate .item4{left:46px;top:224px;background-position:-96px -351px;}
	.css-rotate-4 .item4{background-position:-96px -383px;}
	.css-rotate .item5{left:158px;top:289px;background-position:-128px -351px;}
	.css-rotate-5 .item5{background-position:-128px -383px;}
	.css-rotate .item6{left:271px;top:224px;background-position:-160px -351px;}
	.css-rotate-6 .item6{background-position:-160px -383px;}

	.css-rotate-1 .rt-bg{
	 -moz-transform:rotate(0deg);
	 -webkit-transform:rotate(0deg);
	 -o-transform:rotate(0deg);
	 transform:rotate(0deg);
	 background-position:-199px -415px\\9;
	}
	.css-rotate-2 .rt-bg{
	 -moz-transform:rotate(-60deg);
	 -webkit-transform:rotate(-60deg);
	 -o-transform:rotate(-60deg);
	 transform:rotate(-60deg);
	 background-position:0 -415px\\9;
	}
	.css-rotate-3 .rt-bg{
	 -moz-transform:rotate(-120deg);
	 -webkit-transform:rotate(-120deg);
	 -o-transform:rotate(-120deg);
	 transform:rotate(-120deg);
	 background-position:-199px -813px\\9;
	}
	.css-rotate-4 .rt-bg{
	 -moz-transform:rotate(-180deg);
	 -webkit-transform:rotate(-180deg);
	 -o-transform:rotate(-180deg);
	 transform:rotate(-180deg);
	 background-position:0 -813px\\9;
	}
	.css-rotate-5 .rt-bg{
	 -moz-transform:rotate(-240deg);
	 -webkit-transform:rotate(-240deg);
	 -o-transform:rotate(-240deg);
	 transform:rotate(-240deg);
	 background-position:0 -614px\\9;
	}
	.css-rotate-6 .rt-bg{
	 -moz-transform:rotate(-300deg);
	 -webkit-transform:rotate(-300deg);
	 -o-transform:rotate(-300deg);
	 transform:rotate(-300deg);
	 background-position:-199px -614px\\9;
	}
	/*CSS实现 End*/
	</style>
	<div class="rotate css-rotate" id="css-rotate">
	 <i class="rt-bg"></i>
	 <span class="item item1"></span>
	 <span class="item item2"></span>
	 <span class="item item3"></span>
	 <span class="item item4"></span>
	 <span class="item item5"></span>
	 <span class="item item6"></span>
	</div>
	<script>
	(function(S){
	 var D = S.DOM,E = S.Event;
	 var nodes = D.query("#css-rotate .item");
	 var op = D.get("#css-rotate");
	 var oc = D.prop(op,"class");
	 D.prop(op,"class",oc + " css-rotate-1");
	 E.on(nodes,"mouseover",function(){
	 var i = S.indexOf(this,nodes);
	 D.attr(op,"class",oc + " css-rotate-" + (i + 1));
	 });
	})(KISSY);
	</script>
	<div style="position:absolute;left:20px;top:20px;padding:5px 8px;font-family:'\\5fae\\8f6f\\96c5\\9ed1';font-size:12px;line-height:18px;width:184px;border:1px solid #39f;border-radius:4px;">
	 说明：
	 1、示例一，是基于KISSY实现，<span style="color:#f00;">点击小图标</span>可以看到旋转效果，兼容IE6-9，Firefox，Chrome等主流浏览器。
	 2、示例二，是KISSY+CSS3实现，<span style="color:#f00;">鼠标移上小图标</span>观看旋转效果，虽然也兼容以上各主流浏览器，但在IE下失去平滑效果。
	</div>
	</body>
	</html>

试试其它关键字

　旋转导航　

同语言下

可能有用的

亭贡献的其它代码(23)