Jquery06--CSS样式操作--JQuery动画--练习:淡入淡出动画--练习:CSS动画品牌展示

最新推荐文章于 2024-03-10 18:19:17 发布

靠谱的大钊

最新推荐文章于 2024-03-10 18:19:17 发布

阅读量331

点赞数

分类专栏： JQuery 文章标签： html js css css3 javascript

本文链接：https://blog.csdn.net/qq_44236958/article/details/112759399

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS样式操作

addclass 添加样式
removeClass 删除样式
toggleClass 有就删除没有就添加样式
offset 获取和设置元素的坐标

JQuery动画

基本动画

show() 将隐藏的元素显示
hide() 将可见的元素隐藏
toggle() 可见的隐藏,不可见就显示

以上动画方法可以添加参数

第一个参数是动画执行哦那个的时长以毫秒为单位
第二个参数是动画的回调函数(动画完成后自动调用函数)

淡入淡出动画

fadein() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle() 淡入/淡出切换

基本
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
滑动
slideDown([spe],[eas],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
淡入淡出
fadeIn([speed],[eas],[fn])
fadeOut([speed],[eas],[fn])
fadeTo([[spe],opa,[eas],[fn]])
fadeToggle([speed,[eas],[fn]])

练习:淡入淡出动画

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>

    <script type="text/javascript">
        /*
            基本
            show([speed,[easing],[fn]])
            hide([speed,[easing],[fn]])
            toggle([speed],[easing],[fn])
            滑动
            slideDown([spe],[eas],[fn])
            slideUp([speed,[easing],[fn]])
            slideToggle([speed],[easing],[fn])
            淡入淡出
            fadeIn([speed],[eas],[fn])
            fadeOut([speed],[eas],[fn])
            fadeTo([[spe],opa,[eas],[fn]])
            fadeToggle([speed,[eas],[fn]])
            */

        $(function () {

            //显示   show()
            $("#btn1").click(function(){
                $("#div1").show(1000);
            });

            //隐藏  hide()
            $("#btn2").click(function(){
                $("#div1").hide(1000);
            });
            //切换   toggle()
            //切换   toggle()
            $("#btn3").click(function(){
                $("#div1").toggle(1000);
            });
            //淡入   fadeIn()
            $("#btn4").click(function(){
                $("#div1").fadeIn(1000);
            });
            //淡出  fadeOut()
            $("#btn5").click(function(){
                $("#div1").fadeOut(1000);
            });
            //淡化到  fadeTo()
            $("#btn6").click(function(){
                $("#div1").fadeTo("slow",0.5);
            });
            //淡化切换  fadeToggle()
            $("#btn7").click(function(){
                $("#div1").fadeToggle("slow","linear");
            });
            /*
             slideDown([spe],[eas],[fn])
            slideUp([speed,[easing],[fn]])
            slideToggle([speed],[easing],[fn])
             */
            //   滑动 fadeToggle()
            $("#btn8").click(function(){
                $("#div1").slideDown(400)
            });
            //   滑动 fadeToggle()
            $("#btn9").click(function(){
                $("#div1").slideUp(400)
            });
            //   滑动  fadeToggle()
            $("#btn10").click(function(){
                $("#div1").slideToggle(400)
            });

            //自己调用自己
            var abc=function () {
                $("#div1").slideToggle(400,abc)
            }
            abc()
        })

    </script>

</head>
<body>
<table style="float: left;">
    <tr>
        <td>
            <button id="btn1">显示show()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn2">隐藏hide()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn3">显示/隐藏切换 toggle()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn4">淡入fadeIn()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn5">淡出fadeOut()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn6">淡化到fadeTo()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn7">淡化切换fadeToggle()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn8">滑动
                slideDown([spe],[eas],[fn])
            </button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn9">slideUp([speed,[easing],[fn]])</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn10">slideToggle([speed],[easing],[fn])</button>
        </td>
    </tr>
</table>

<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
    jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>

</html>

练习:CSS动画品牌展示

需求：

1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。

2.当显示全部内容的时候，按钮文本为“显示精简品牌”

然后，小三角形向上。所有品牌产品为默认颜色。

3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”

然后小三形向下。并且把佳能，尼康的品牌颜色改为红色（给 li 标签添加 promoted 样式即可）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>品牌展示练习</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
            text-align: center;
        }

        a {
            color: #04D;
            text-decoration: none;
        }

        a:hover {
            color: #F50;
            text-decoration: underline;
        }

        .SubCategoryBox {
            width: 600px;
            margin: 0 auto;
            text-align: center;
            margin-top: 40px;
        }

        .SubCategoryBox ul {
            list-style: none;
        }

        .SubCategoryBox ul li {
            display: block;
            float: left;
            width: 200px;
            line-height: 20px;
        }

        .showmore, .showless {
            clear: both;
            text-align: center;
            padding-top: 10px;
        }

        .showmore a, .showless a {
            display: block;
            width: 120px;
            margin: 0 auto;
            line-height: 24px;
            border: 1px solid #AAA;
        }

        .showmore a span {
            padding-left: 15px;
            background: url(img/down.gif) no-repeat 0 0;
        }

        .showless a span {
            padding-left: 15px;
            background: url(img/up.gif) no-repeat 0 0;
        }

        .promoted a {
            color: #F50;
        }
    </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //基本初始状态
            $("li:gt(5):not(:last)").hide();//隐藏

            //给功能的按钮绑定单击事件
            $("div div a").click(function () {
                //让某些品牌, 显示,或隐藏
                $("li:gt(5):not(:last)").toggle();//隐藏

                //判断品牌当前是否可见
                if ($("li:gt(5):not(:last)").is(":hidden")) {
                    //品牌隐藏状态  1 显示全部品牌
                    $("div div  a span ").text("显示全部品牌")

                    $("div div").removeClass();
                    $("div div").addClass("showmore");

                    //去掉高亮
                    $("li:contains('索尼')").removeClass("promoted")
                } else {
                    $("div div  a span ").text("显示精简品牌");

                    $("div div").removeClass();
                    $("div div").addClass("showless")

                    //加高亮
                    $("li:contains('索尼')").addClass("promoted")
                }
                return false;
            });
        });
    </script>
</head>
<body>
<div class="SubCategoryBox">
    <ul>
        <li><a href="#">佳能</a><i>(30440) </i></li>
        <li><a href="#">索尼</a><i>(27220) </i></li>
        <li><a href="#">三星</a><i>(20808) </i></li>
        <li><a href="#">尼康</a><i>(17821) </i></li>
        <li><a href="#">松下</a><i>(12289) </i></li>
        <li><a href="#">卡西欧</a><i>(8242) </i></li>
        <li><a href="#">富士</a><i>(14894) </i></li>
        <li><a href="#">柯达</a><i>(9520) </i></li>
        <li><a href="#">宾得</a><i>(2195) </i></li>
        <li><a href="#">理光</a><i>(4114) </i></li>
        <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
        <li><a href="#">明基</a><i>(1466) </i></li>
        <li><a href="#">爱国者</a><i>(3091) </i></li>
        <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
    </ul>
    <div class="showmore">
        <a href="more.html"><span>显示全部品牌</span></a>
    </div>
</div>
</body>
</html>