【jQuery学习日记】jQuery实现滚动动画

LingPF

2019-06-27

关注关注

需要实现的效果

【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>

jquery动画 jquery