jQuery仿QQ右下角抖动效果

模板网 2014-09-12

jQuery仿QQ右下角抖动效果,代码添加详细注释,方面理解与修改。链接到商务通,可直接引入网页使用。

下载地址:jQuery仿QQ右下角抖动效果

效果截图:

jQuery仿QQ右下角抖动效果

<title>jQuery仿QQ右下角抖动效果</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
/**抖动窗口html代码**/
var leftShake='<div id="shake" style="display:none; width:216px; height:133px; font-size:12px; line-height:25px; position:fixed; right:0px; bottom:0px; z-index:200;">'+	
	'<a id="windowsclose" style="display:block; width:26px; height:26px; text-align:center; cursor:pointer; position:absolute; right:5px; top:5px;z-index:200;" onclick="shakeHide()">&#160;</a>'+	
	'<a href="javascript:void(0);" onclick="LR_HideInvite();openZoosUrl();return false;"><img src="http://www.120muban.com/data2/20140912/shake.png" width="216" height="133" border="0" /></a>'+
	'<a href="javascript:void(0);" onclick="LR_HideInvite();openZoosUrl();return false;" style="position:absolute; left:70px; bottom:65px; color:#069DD5;" >医院在线专家</a>'+
	'<a href="javascript:void(0);" onclick="LR_HideInvite(); openZoosUrl(); return false;" style="color:#000; position:absolute; left:70px; bottom:43px;">向您发送了一条消息</a>'+
	'<a href="javascript:void(0);" onclick="LR_HideInvite(); openZoosUrl(); return false;" style="color:#069DD5; position:absolute; right:57px; bottom:1px;" >查看</a>'+
	'<a href="javascript:void(0);" onclick="shakeHide()" style="color:#a1a1a1; position:absolute; right:22px; bottom:1px;" >忽略</a>'+
'</div>'
document.write(leftShake);
document.write("<style> #windowsclose:hover{ text-decoration:none;} </style> ");
/**抖动窗口html代码**/


$(document).ready(function(){  
	$('#shake').css('display','block');
	FollowDiv = {
		follow : function(){
			$('#shake').css('position','absolute');
			$(window).scroll(function(){
				var f_top = $(window).scrollTop() + $(window).height() - $("#shake").outerHeight();
				$('#shake').css( 'top' , f_top );
			});
		}
	}
		shake();
		repeat = setInterval(shake,7000);//这里repeat是全局,在hideshake函数中清空
		//绑定点击事件
		$('#qqShake').bind('click',function(){
			if($('#LRfloater0').css('display') == 'block'){
				$('#LRfloater0 img').eq(1).click();
			}
			if($('#LRfloater1').css('display') == 'block'){
				$('#LRfloater1 area').eq(1).click();
			}
		})
 });

//隐藏抖动窗口
function shakeHide(){   
	$('#shake').css('display','none');
	setTimeout("shakeShow()",20000);
}	

//显示抖动窗口
function shakeShow(){   
	$('#shake').css('display','block');
}
//窗口抖动
function shake(){ 
	var a=['bottom','right'],b=0;
	var u=setInterval(function(){
		$('#shake').css( a[b%2] , (b++)%4<2?0:4 );
		if(b>17){
			clearInterval(u);
			b=0;
		}
	 },30)
}
</script>
<p>医疗模板库(www.120muban.com)收集整理 仅供学习参考,请勿用于商业用途。</p>

相关文章

  1. 医疗站常用的仿QQ窗口抖动效果

    医疗站常用的仿QQ窗口抖动效果,使用了jquery的动画效果,调用的时候记得要引入jquery。

  2. 兼容所有主流浏览器的居中DIV代码 兼容IE6

    兼容所有主流浏览器的居中DIV代码 兼容IE6,主要是下面的这段CSS代码来兼容IE6的。 复制代码 代码如下: /*兼容IE6居中*/ _position: absolute; _top: expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop)); _left:

  3. js文章页选中文本出现弹窗效果

    js文章页选中文本出现弹窗效果,文章内容文本被鼠标选中是弹出一个邀请框效果实现,非常棒的一个效果,可以提高转化。

  4. jQuery仿QQ右下角抖动效果

    jQuery仿QQ右下角抖动效果,代码添加详细注释,方面理解与修改。链接到商务通,可直接引入网页使用。 下载地址: jQuery仿QQ右下角抖动效果 效果截图:

  5. 左下角手机二维码浮窗效果

    左下角手机二维码浮窗效果,适合用于新闻源。 效果截图:

随机推荐

  1. 医疗站常用的仿QQ窗口抖动效果

    医疗站常用的仿QQ窗口抖动效果,使用了jquery的动画效果,调用的时候记得要引入jquery。

  2. 兼容所有主流浏览器的居中DIV代码 兼容IE6

    兼容所有主流浏览器的居中DIV代码 兼容IE6,主要是下面的这段CSS代码来兼容IE6的。 复制代码 代码如下: /*兼容IE6居中*/ _position: absolute; _top: expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop)); _left:

  3. js文章页选中文本出现弹窗效果

    js文章页选中文本出现弹窗效果,文章内容文本被鼠标选中是弹出一个邀请框效果实现,非常棒的一个效果,可以提高转化。

  4. jQuery仿QQ右下角抖动效果

    jQuery仿QQ右下角抖动效果,代码添加详细注释,方面理解与修改。链接到商务通,可直接引入网页使用。 下载地址: jQuery仿QQ右下角抖动效果 效果截图:

  5. 左下角手机二维码浮窗效果

    左下角手机二维码浮窗效果,适合用于新闻源。 效果截图: