jQuery圓形布局卡牌滑動切換效果



89 352 118



特效描述:jQuery圓形布局 卡牌滑動切換效果,jQuery css3圓形布局卡牌,點擊卡牌滑動切換展示代碼(不兼容IE6,7,8,9)

代碼結構

1. 引入JS

<script src="js/jquery.min.js"></script>

2. HTML代碼

<div class="guid">
    <h1 class="title">圓形滑塊</h1>
</div>
<div class="slider">
    <div class="slider-inner">
        <div class="slider-origin">
            <div class="slider-item">1</div>
            <div class="slider-item">2</div>
            <div class="slider-item">3</div>
            <div class="slider-item">4</div>
            <div class="slider-item">5</div>
            <div class="slider-item">6</div>
            <div class="slider-item">7</div>
            <div class="slider-item">8</div>
            <div class="slider-item">9</div>
            <div class="slider-item">10</div>
            <div class="slider-item">11</div>
            <div class="slider-item">12</div>
            <div class="slider-item">13</div>
            <div class="slider-item">14</div>
            <div class="slider-item">15</div>
            <div class="slider-item">16</div>
            <div class="slider-item">17</div>
            <div class="slider-item">18</div>
            <div class="slider-item">19</div>
            <div class="slider-item">20</div>
            <div class="slider-item">21</div>
            <div class="slider-item">22</div>
            <div class="slider-item">23</div>
            <div class="slider-item">24</div>
            <div class="slider-item">25</div>
            <div class="slider-item">26</div>
            <div class="slider-item">27</div>
            <div class="slider-item">28</div>
            <div class="slider-item">29</div>
            <div class="slider-item">30</div>
        </div>
    </div>
</div>
<script>
$(document).ready(function(){
    // helpful variables
    var slider = $('.slider');
    var sliderInner = slider.find('.slider-inner');
    var sliderOrigin = slider.find('.slider-origin');
    var sliderItems = slider.find('.slider-item');
    var itemsLength = sliderItems.length;
    var calcDeg = 270 / itemsLength;
    var clickDown = false;
    var mouseMove = false;
    var moveFrom = null;
    var moveTo = null;
    var extraDeg = 0;
    var currentItem = sliderItems.eq(0);
    // slider origin width & height = half of item height
    sliderOrigin.width(sliderItems.outerHeight() / 2);
    sliderOrigin.height(sliderItems.outerHeight() / 2);
    // slider inner width & height = item height * 3.5
    sliderInner.width(sliderItems.outerHeight()*3.5);
    sliderInner.height(sliderItems.outerHeight()*3.5);
    var sliderInnerWidth = sliderInner.outerWidth();
    var sliderInnerOffset = sliderInner.offset();
    sliderOrigin.css('margin-top',(sliderInner.height() / 2) - (sliderOrigin.height() / 2));
    // calc rotation positioning
    function rotationPosition(exceptIndex){
        exceptIndex = exceptIndex | 0;
        var i = 1;
        sliderItems.each(function(e){
            var $this = $(this);
            extraDeg = exceptIndex > itemsLength/2? 360: 0;
            if(e === exceptIndex){
                $this.addClass('active').css('transform', 'rotate('+extraDeg+'deg)');
            }else{
                $this.css('transform', 'rotate('+((i*calcDeg)+45)+'deg)');
                i++;
            }
        });
    }rotationPosition();
    // click event on item
    var clickedItemIndex = null;
    function sliderItemsClickEvent(){
        sliderItems.mousedown(function(e){
            if(clickedItemIndex == null && e.which == 1){
                clickedItemIndex = $(this).index();
            }
        });
        sliderItems.mouseup(function(){
            var $this = $(this);
            if(clickedItemIndex === $this.index()){
                currentItem = $this;
                pushIndex($this.index());
            }
        });
    }sliderItemsClickEvent();
    // push index of the activated item
    function pushIndex(index){
        sliderItems.removeClass('active');
        rotationPosition(index);
    }
    // clickDown = true if mousedown on slider
    sliderInner.mousedown(function(e){
        clickDown = true;
        moveFrom = e.pageX;
    });
    // clickDown = false if mouseup on any place in the page
    $(document).mouseup(function(e){
        clickDown = false;
        setTimeout(function(){ clickedItemIndex = null; }, 505);
        // setTimeout(function(){clickDown = false;}, 505);
        if(mouseMove){
            mouseMove = false;
            moveto = e.pageX;
            swipe(moveFrom, moveto);
        }
    });
    // calc mouse move on sliderInner div
    sliderInner.mousemove(function(e){
        if(clickDown){
            if(!mouseMove){mouseMove = true;}
            var offsetX = e.pageX - sliderInnerOffset.left;
            var move = moveFrom - sliderInnerOffset.left;
            var motionDeg = ((offsetX - move)/sliderInnerWidth) * (calcDeg*2);
            extraDeg = currentItem.index() > itemsLength/2? 360:0; 
            sliderInner.find('.slider-item.active').css('transform', 'rotate('+(motionDeg+extraDeg)+'deg)');
        }
    });
    function swipe(from, to){
        var distance = Math.abs(from - to); // mouse move distance
        var rightDir = from < to;
        if(distance > sliderInnerWidth/4){
            navigate();
        }else{
            currentItem.css('transform', 'rotate('+(currentItem.index() > itemsLength/2? 360:0)+'deg)');
        }
        function navigate(){
            if(rightDir){
                var nextIndex = currentItem.next().index();
                pushIndex(nextIndex != -1? nextIndex:  0);
            }else{
                var prevIndex = currentItem.prev().index();
                pushIndex( prevIndex != -1? prevIndex:  sliderItems.length -1);
            }
            currentItem = sliderInner.find('.slider-item.active');
        }
    }
});</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動選項卡 滑動切換 圖片切換 圖片選項卡 圖標選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表