特效介绍
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>