鼠標跟隨效果

時間 2019-11-12

標籤鼠標跟隨效果简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;list-style: none;text-decoration: none}
        .nav{width: 100%;height: 3rem;background-color: #ddd}
        .nav ul{width: 70%;height: 3rem;margin: 0 auto;}
        .nav ul li{float: left;width: 14.28%;height: 3rem;text-align: center;line-height: 3rem;position: relative}
        .nav li a{display: inline-block;width: 100%;}
        .nav li span{height: 2px;width: 0;background-color: #000;position: absolute;top:2.9rem;left:50%;}
        .active{background-color: red;}
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li class="t  active"><a href="#">星期一</a><span></span></li>
            <li class="t"><a href="#">星期二</a><span></span></li>
            <li class="t"><a href="#">星期三</a><span></span></li>
            <li class="t"><a href="#">星期四</a><span></span></li>
            <li class="t"><a href="#">星期五</a><span></span></li>
            <li class="t"><a href="#">星期六</a><span></span></li>
            <li class="t"><a href="#">星期日</a><span></span></li>
        </ul>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(".t").hover(function(){
            $("span",this).animate({
				left:'0',
				width:'100%',
				right:'0'
			},500);
        },function(){
            $("span",this).stop().animate({
				left:'50%',
				width:'0',
			},200);
        })
        $('.t').click(function(){
            $('li').removeClass('active');
            $(this).addClass('active');
            return false;
        })
    </script>
</body>
</html>

結果以下：css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。