javaweb-------------jQuery css动画练习之品牌展示

本文链接：https://blog.csdn.net/tutou_girl/article/details/112819323

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 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的class并且后面有子节点a a有子节点span的才可以用这个样式
class属性是用来引用你页面的类样式
 		*/
        .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>

在这里插入图片描述