鼠标经过文字时改变该文字及其周边文字的位置 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        .con{margin:20px auto;text-align:center;}
        .con p{display:inline-block;position:relative;cursor:pointer;width:20px;height:20px;}
    </style>
</head>
<body>
<div class="con">
    <p>世</p><p>界</p><p>之</p><p>大</p><p>无</p><p>奇</p><p>不</p><p>有</p>
</div>
<div class="con">
    <p>世</p><p>界</p><p>之</p><p>大</p><p>无</p><p>奇</p><p>不</p><p>有</p>
</div>
<div class="con">
    <p>世</p><p>界</p><p>之</p><p>大</p><p>无</p><p>奇</p><p>不</p><p>有</p>
</div>
<div class="con">
    <p>世</p><p>界</p><p>之</p><p>大</p><p>无</p><p>奇</p><p>不</p><p>有</p>
</div>
<div class="con">
    <p>世</p><p>界</p><p>之</p><p>大</p><p>无</p><p>奇</p><p>不</p><p>有</p>
</div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
    var timer;
    $(".con").find("p").hover(function(){
        clear();
        var $this=$(this);
        timer=window.setTimeout(function(){
            $this.animate({"top":"-10px"});
            $this.prev().animate({"top":"-6px"});
            $this.next().animate({"top":"-6px"});
            $this.prev().prev().animate({"top":"-2px"});
            $this.next().next().animate({"top":"-2px"});
        },100);

    },function(){
        clear();
        $(".con").find("p").animate({top:0});
    });
    function clear(){
        clearTimeout(timer);
        timer=null;
    }
</script>
</html>

 

posted @ 2016-08-29 13:17  dongxiaolei  阅读(497)  评论(0)    收藏  举报