jQuery窗口抖动特效

jQuery仿QQ右下角窗口抖动效果插件，窗口每隔两秒钟，就会上下左右抖动一次，和QQ的窗口抖动非常相似。原理就是每隔两秒钟更改一次窗口的position值。
1、在head引入相关css和jQuery库

<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
.hos_box_tc{background:url(images/tc_bg.jpg) no-repeat;width:214px;height:124px;position:fixed;z-index:9999;_position:absolute;clip:rect(0 100% 100% 0);
right:0px;bottom:0px;clip:rect(0 100% 100% 0);
_top:expression(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.clientHeight));overflow:hidden;zoom:1;}
.hos_box_tc p{height:22px;text-align:right; font-size:12px; margin:0px; padding:0px;}
.hos_box_tc p a{display:inline-block;width:36px;height:22px; font-size:12px;}
.hos_box_tc_zx{height:91px;width:214px;display:inline-block;overflow:hidden;zoom:1;}
.hos_box_tc_zx:hover{ text-decoration:none;}
.hos_box_tc_zx img{float:left;border:solid 1px #D4E3E9;margin-left:17px;display:inline; margin-top:20px;}
.hos_box_tc_zx div{float:left;margin-left:6px;width:133px; font-size:12px; margin-top:20px;}
.hos_box_tc_zx div span{color:#1670EB;display:inline-block;line-height:18px; font-size:12px;}
.hos_box_tc_zx div span a{color:#1670EB; font-size:12px;}
.hos_box_tc_zx .hos_box_ys{color:#1670EB;margin-left:40px;display:inline-block;margin-top:4px;font-size:12px;}
.hos_box_tc_zx .hos_box_no{color:#1670EB;margin-left:10px;display:inline-block;margin-top:4px;font-size:12px;}
</style>

2、引入下面的html代码：

<div style="bottom: 4px; right: 0px;" id="hos_box_tc" class="hos_box_tc">
    <p>
        <a target="_self" title="关闭" onclick="close_tc()" href="javascript:;"></a>
    </p>
    <div class="hos_box_tc_zx">
        <a target="_blank" onclick="close_tc()" title="模板网" href="http://www.5imoban.net">
            <img src="images/225.jpg" height="57" width="50"></a><div>
                <span><a target="_blank" onclick="close_tc()" href="http://www.5imoban.net">
                    站长(QQ543031222)</a></span><br>
                发送了一个窗口抖动<br>
                <a class="hos_box_ys" target="_blank" title="免费网站模板" onclick="close_tc()" href="http://www.5imoban.net">
                    接受</a><a target="_self" class="hos_box_no" onclick="close_tc()" href="javascript:;">拒绝</a></div>
    </div>
</div>

3、在html代码后面引入js代码：

<script type="text/javascript">
$(function(){var repeat = setInterval(zd,5000);})
    function close_tc()
    {
        $(".hos_box_tc").css("display","none");
    }
    function zd(){
     var a=['bottom','right'],b=0;
     var u=setInterval(
        function(){
            $('.hos_box_tc').css(a[b%2],(b++)%4<2?0:4);
            if(b>30){
                clearInterval(u);
                b=0
            }
        },
        60
    )
}
</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！