弹跳小球案例

20190107134434.png

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
ul{ list-style:none;}
.menu{ width:300px; margin:100px auto; position:relative; border:1px solid #ccc; padding-left:50px;}
li{ height:50px; background:red; width:300px; margin-bottom:20px;text-align: center;}
.ball{ position:absolute;height:30px; width:30px; background:blue; border-radius:50%; top:10px; left:10px;}
.ac{ background:blue;}
</style>

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.easing.min.js"></script>
<script src="jquery.hxsd.plugin.js"></script>
<script type="text/javascript">
    $(function(){
        var t = 0;            //记录点击过的top值
        $('.menu li').click(function(){
            t = $(this).position().top +10;
            $(this).addClass('ac').siblings().removeClass('ac')
        }).hover(function(){
            $('.menu .ball').stop().animate({'top':$(this).position().top+10},500,"easeOutBounce")
        },function(){
            $('.menu .ball').stop().animate({'top':t},500,"easeOutBounce")    
        })
    })
    
</script>


</head>
<body>
    <div class="menu">
        <span class="ball"></span>
        <ul>
            <li class="ac">1楼</li>
            <li>2楼</li>
            <li>3楼</li>
            <li>4楼</li>
            <li>5楼</li>
        </ul>
   </div>

</body>

<!--70-->


</html>

标签: jQuery案例

添加新评论