20181022 jquery动画

最新推荐文章于 2018-10-25 23:18:48 发布

宫城诗

最新推荐文章于 2018-10-25 23:18:48 发布

阅读量107

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_36344771/article/details/83280495

版权

javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

jQuery修改样式，多项修改样式

修改样式
获取样式$(“li”).css(“backgroundColor”);
隐式迭代，：只会返回第一个元素

class操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bigger{
            font-size: 40px;
        }
        .changeColor{
            background: red;
        }
    </style>
</head>
<body>
<button id="btn1">bigger按钮</button>
<button id="btn22">changeColor按钮</button>
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
        $("#btn1").click(function () {
            $("li").addClass("bigger");
        })
    })
</script>
</body>
</html>

同样对于removeClass
hasClass()判断有没有该类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .changeColor{
            background: red;
        }
    </style>
</head>
<body>
<button>a</button>
<button>b</button>
<button>c</button>
<button>d</button>
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
       $("button").click(function () {
           $(this).addClass("changeColor");
           $(this).siblings().removeClass("changeColor");
       })
    })
</script>
</body>
</html>

按钮排他

样式操作，用css进行操作
attr（name,value）

属性操作

对于布尔类型的属性，不要用attr方法，应该用prop方法
prop方法跟attr方法一样。

jquery动画
三组基本动画，hide show
slideDown slideToggle
fadeIn fadeOut fadeToggle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<div>

</div>
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
        $("button").eq(0).click(function () {
            //show不穿参数没有动画效果，有显示的效果
            //可以传入speed持续时间，1000为1秒，也可以是固定字符串

            $("div").show(1000);
        })
         })
    $(function () {
        $("button").eq(2).click(function () {
            $("div").hide();
        })
    })
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>滑入滑出</button>
<div>

</div>
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
        $("button").eq(0).click(function () {
            //与show函数一样

            $("div").slideDown();
        })
    })
    $(function () {
        $("button").eq(1).click(function () {
            $("div").slideUp();
        })
        })
    $(function () {
        $("button").eq(2).click(function () {
            $("div").slideToggle();
        })
    })
</script>

</body>
</html>

京东轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title>京东商城</title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }

                .slider {
                    height: 340px;
                    width: 790px;
                    margin: 100px auto;
                    position: relative;
                }

                .slider li {
                    position: absolute;
                    display: none;
                }

                .slider li:first-child {
                    display: block;
                }


                .arrow {
                    display: none;
                }

                .slider:hover .arrow {
                    display: block;
                }

                .arrow-left,
                .arrow-right {
                    font-family: "SimSun", "宋体";
                    width: 30px;
                    height: 60px;
                    background-color: rgba(0, 0, 0, 0.1);
                    position: absolute;
                    top: 50%;
                    margin-top: -30px;
                    cursor: pointer;
                    text-align: center;
                    line-height: 60px;
                    color: #fff;
                    font-weight: 700;
                    font-size: 30px;
                }

                .arrow-left:hover,
                .arrow-right:hover {
                    background-color: rgba(0, 0, 0, .5);
                }

                .arrow-left {
                    left: 0;
                }

                .arrow-right {
                    right: 0;
                }

            </style>
        </head>
<body>
<div class="slider">
    <ul>
        <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
    </ul>
    <!--箭头-->
    <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
    </div>
</div>


<script src="jquery-3.3.1.js"></script>

<script>
    $(function () {

      var count=0;
      $(".arrow-left").click(function () {
          count++;
          if(count==$(".slider li").length){
              count=0;
          }
          $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();

      })
    });
</script>

</body>
</html></title>
</head>
<body>

</body>
</html>

动画队列
jquery的特性
可以一直animate一直下去，进行块级运动，把动画存放在队列里，所以动画能执行

宫城诗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20181022 jquery动画

jQuery修改样式，多项修改样式修改样式获取样式$(“li”).css(“backgroundColor”);隐式迭代，：只会返回第一个元素class操作&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title
复制链接

扫一扫

专栏目录