返回顶部

收藏

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

更多

最近在工作中遇到这样的需求,今天有空把代码整理了下,自己做了一个小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;">
    说明:<br>
        1、示例一,是基于KISSY实现,<span style="color:#f00;">点击小图标</span>可以看到旋转效果,兼容IE6-9,Firefox,Chrome等主流浏览器。<br>
        2、示例二,是KISSY+CSS3实现,<span style="color:#f00;">鼠标移上小图标</span>观看旋转效果,虽然也兼容以上各主流浏览器,但在IE下失去平滑效果。
</div>
</body>
</html>
//该片段来自于http://outofmemory.cn

标签:javascript,基础

收藏

0人收藏

支持

0

反对

0

发表评论