【jQuery进修日志】jQuery完成转动动画

2019年8月24日 172次阅读来源: bowskitten

须要完成的结果

《【jQuery进修日志】jQuery完成转动动画》

款式剖析：

2个重要部份，头部的题目和导航部份，和重要的功用完成地区；

1.头部

    <div id="header">
        <h1>动漫视频</h1>
        <span><</span>
        <span>></span>
    </div>
    <div id="tips">
        <span class="on"> </span>
        <span> </span>
        <span> </span>
    </div>

2.功用地区

    <div id="viewBox">
        <ul id="contentBox">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>
    </div>

增加款式

    <style>
        #header{
            display: inline-block;
        }
        #header h1{
            display: inline-block;
            font-size: 32px;
            padding-left: 20px;
        }
        #header span{
            width: 30px;
            height: 30px;
            display: inline-block;
            font-size: 23px;
            cursor:pointer;
            border: 1px solid #eee;
            border-radius: 3px;
            text-align: center;
        }
        #header span:hover{
            background: #333;
            color: #fff;
        }

        #viewBox{
            width: 960px;
            height: 140px;
            font-size: 0;
            overflow: hidden;
            border: 1px solid #333;
        }
        #contentBox{
            width: 2880px;
            position: relative;
        }
        #contentBox>li{
            width: 200px;
            height: 100px;
            background: pink;
            display: inline-block;
            font-size: 12px;
            margin: 20px;
        }
        #tips{
            display: inline-block;
        }
        #tips span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            text-align: center;
            line-height: 20px;
            border: 1px solid #eee;
            cursor: pointer;
        }
        #tips span:hover{
            background: #999;
            color: white;
        }
        #tips span.on{
            background: black;
            color: white;
        }
    </style>

此处须要注重，由于须要给 contentBox 增加 animate left 要领，所以须要给它的 position : related 才能使 animate left 见效

功用剖析：

1.下一页

《【jQuery进修日志】jQuery完成转动动画》

2.当下一页转动到最后一页面，再点击下一页的时刻，须要返回到第一页
《【jQuery进修日志】jQuery完成转动动画》

3.上一页
《【jQuery进修日志】jQuery完成转动动画》

4.当上一页转动到第一页，再点击上一页的时刻，须要行进到最后一页
《【jQuery进修日志】jQuery完成转动动画》

5.当点击圆圈的时刻，行进到恣意一页
《【jQuery进修日志】jQuery完成转动动画》

功用完成

起首,我们在接下来的功用中经常使用的一些元素，先赋值给变量

$vBox = $('#viewBox');                          /* 能够见到的展现地区 */
$cBox = $('#contentBox');                       /* 内容地区 */
vWidth = $vBox.width();                         /* 可见地区的宽度 */
cWidth = $cBox.width();                         /* 内容地区的宽度 */

然后，我们有5个小功用，下一页(goNext)，回到顶部(goTop)，上一页(goBack)，回到底部(goBotoom)，到恣意页(goPage)

1.下一页(goNext)

var vLeft=$cBox.position().left;                //内容地区距左边的间隔
$cBox.animate({left: '-='+vWidth+'px'});

2.回到顶部(goTop)

var vLeft=$cBox.position().left;
$cBox.animate({left: 0});

3.上一页(goBack)

var vLeft=$cBox.position().left;                //内容地区距左边的间隔
$cBox.animate({left: '+='+vWidth+'px'});

4.回到底部(goBotoom)

var vLeft=$cBox.position().left;                //内容地区距左边的间隔
$cBox.animate({left: -cWidth+vWidth});

5.到恣意页(goPage)

var vLeft=$cBox.position().left;                //内容地区距左边的间隔
$cBox.animate({left: -vWidth*page});            //通报一个page参数用来晓得须要跳转到第几页

当每一个小功用完成后,组合下功用,并绑定功用

var $vBox;
var $cBox;
var vWidth;
var cWidth;
$(function () {
    $vBox = $('#viewBox');
    $cBox = $('#contentBox');
    vWidth = $vBox.width();
    cWidth = $cBox.width();

    $('#header span:last-child').click(function () {
        go('next');
    })
    $('#header span:nth-child(2)').click(function () {
        go('back');
    })
    
    $('#tips>span').click(function () {
        var $ThisS=$(this);
        $ThisS.addClass('on').siblings().removeClass();
        go($ThisS.index());
    })

})
        
function go(page) {
    var vLeft=$cBox.position().left;
    if (!$cBox.is(':animated')){
        switch (page){
            case 'next':
                if( vLeft > -cWidth-vLeft ){
                    $cBox.animate({left: '-='+vWidth+'px'});
                }else{
                    go('top');
                }
                break;

            case 'back':
                if( vLeft < 0){
                    $cBox.animate({left: '+='+vWidth+'px'});
                }else{
                    go('bottom');
                }
                break;

            case 'top':
                $cBox.animate({left: 0});
                break;

            case 'bottom':
                $cBox.animate({left: -cWidth+vWidth});
                break;

            default:
                $cBox.animate({left: -vWidth*page});
                break;
        }
    }
}

下面是悉数代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个页面</title>
    <!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">-->
    <script src="common/js/jquery-2.1.1.min.js"></script>
    <!--<script src="common/js/screenAdaptation.js"></script>-->
    <script src="js/download.js"></script>
    <script src="js/stopXBack.js"></script>
    <link rel="stylesheet" href="common/css/common-style.css?v=<%=Math.random()*100 %>">
    <link rel="stylesheet" href="css/download.css?v=<%=Math.random()*100 %>">
    <style>
        #header{
            display: inline-block;
        }
        #header h1{
            display: inline-block;
            font-size: 32px;
            padding-left: 20px;
        }
        #header span{
            width: 30px;
            height: 30px;
            display: inline-block;
            font-size: 23px;
            cursor:pointer;
            border: 1px solid #eee;
            border-radius: 3px;
            text-align: center;
        }
        #header span:hover{
            background: #333;
            color: #fff;
        }

        #viewBox{
            width: 960px;
            height: 140px;
            font-size: 0;
            overflow: hidden;
            border: 1px solid #333;
        }
        #contentBox{
            width: 2880px;
            position: relative;
        }
        #contentBox>li{
            width: 200px;
            height: 100px;
            background: pink;
            display: inline-block;
            font-size: 12px;
            margin: 20px;
        }
        #tips{
            display: inline-block;
        }
        #tips span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            text-align: center;
            line-height: 20px;
            border: 1px solid #eee;
            cursor: pointer;
        }
        #tips span:hover{
            background: #999;
            color: white;
        }
        #tips span.on{
            background: black;
            color: white;
        }
    </style>
    <script>
        var $vBox;
        var $cBox;
        var vWidth;
        var cWidth;
        $(function () {
            $vBox = $('#viewBox');
            $cBox = $('#contentBox');
            vWidth = $vBox.width();
            cWidth = $cBox.width();

            $('#header span:last-child').click(function () {
                go('next');
            })
            $('#header span:nth-child(2)').click(function () {
                go('back');
            })
            
            $('#tips>span').click(function () {
                var $ThisS=$(this);
                $ThisS.addClass('on').siblings().removeClass();
                go($ThisS.index());
            })

        })

        function go(page) {
            var vLeft=$cBox.position().left;
            if (!$cBox.is(':animated')){
                switch (page){
                    case 'next':
                        if( vLeft > -cWidth-vLeft ){
                            $cBox.animate({left: '-='+vWidth+'px'});
                        }else{
                            go('top');
                        }
                        break;

                    case 'back':
                        if( vLeft < 0){
                            $cBox.animate({left: '+='+vWidth+'px'});
                        }else{
                            go('bottom');
                        }
                        break;

                    case 'top':
                        $cBox.animate({left: 0});
                        break;

                    case 'bottom':
                        $cBox.animate({left: -cWidth+vWidth});
                        break;

                    default:
                        $cBox.animate({left: -vWidth*page});
                        break;
                }
            }
        }

    </script>
</head>
<body>
    <div id="header">
        <h1>动漫视频</h1>
        <span><</span>
        <span>></span>
    </div>
    <div id="tips">
        <span class="on"> </span>
        <span> </span>
        <span> </span>
    </div>
    <div id="viewBox">
        <ul id="contentBox">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>
    </div>
</body>
</html>

    原文作者：bowskitten
    原文地址: https://segmentfault.com/a/1190000014062321
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。