jquery 제목 선택 애니메이션-JS 튜토리얼-php.cn

jquery 제목 선택 애니메이션

韦小宝

풀어 주다： 2017-11-20 11:41:21

원래의

1820명이 탐색했습니다.

jquery제목 선택 애니메이션, 소스 코드가 보너스로 제공됩니다. jquery에 관심이 있다면 이를 연구하고 jquery~~

jquery 제목 선택 애니메이션

코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP中文网</title>
    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <style>
        /*container容器只是为了水平居中，如不需要可以去掉这层嵌套*/
        .container{
            left: 50%;
            margin-top: 100px;
            float: left;
            cursor:pointer;
            position: relative;
        }
        .BG{
            right: 50%;
            font-size: 0;
            background-color: #f2f2f2;
            border-radius: 30px;
            position: relative;
        }
        .container div{
            font-size: 16px;
            line-height: 60px;
        }
        .list{
            float: left;
            display: inline-block;
            padding: 0 50px;
            transition: color 0.5s;
            position: relative;
            z-index: 1;
        }

        /*这里的listH和listA顺序不能换，有优先级，当listA被使用时listH不起作用*/
        .listH{
            color: #ff8300;
        }
        .listA{
            color: #fff;
        }

        /*滑块*/
        #active{
            width: 100px;
            height: 60px;
            border-radius: 30px;
            background-color: #ff8300;
            box-shadow: 0 5px 16px 0 rgba(255, 144, 0, 0.58);
            position: relative;
            z-index: 0;
            transition: left 0.5s,width 1s;
        }
    </style>
    <script>
        $(document).ready(function () {

                /*设置默认激活的选项卡eq(i)*/
                var aL = $(".list:eq(1)");
                $("#active").width(aL.innerWidth());
                $("#active").offset(aL.offset());
                aL.addClass("listA");

                /*为每个按钮添加点击事件*/
                $(".list").click(function() {
                    $("#active").width($(this).innerWidth());   //设置宽度
                    $("#active").offset($(this).offset());   //设置位置
                    $(this).addClass("listA");
                    $(".list").not(this).removeClass("listA");
                });

                /*hover效果*/
                $(".list").hover(function () {
                    $(this).addClass("listH")
                },function () {
                    $(this).removeClass("listH")
                })

        });
    </script>
</head>
<body>
<div>
    <div>
        <div>PHP中文网首页</div>
        <div>PHP中文网视频教程</div>
        <div>PHP中文网社区</div>
        <div>PHP中文网技术文章</div>
        <div>PHP中文网工具下载</div>
        <div id="active"></div>
    </div>
</div>
</body>
</html>

로그인 후 복사

위 내용은 jquery 제목 선택 애니메이션의 소스코드입니다. 더 많은 기술자료와 소스코드를 보시려면 PHP 중국어 홈페이지에 가셔서

검색해 보세요. 관련 권장사항:

JS 루프 캐러셀 이미지

jquery는 IP

jquery가 제스처 잠금 해제 소스 코드를 구현합니다

위 내용은 jquery 제목 선택 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!