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()"> </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>
相关文章
- 医疗网站常用的网页左侧浮动咨询菜单
医疗网站常用的网页左侧浮动咨询菜单,包含在线咨询,免费电话,QQ在线,自助挂号,回到顶部菜单,其中免费电话采用离线宝免费电话接口,想要使用该功能请修改代码中的相关参数,具体修改方法参考之前的文章 百度离线宝调用接口 。 代码打包下载: 医疗网站
- 网站底部百度搜索框实现百度搜索结果为指定网站
网站底部百度搜索框实现百度搜索结果为指定网站,在网站底部提供一个百度搜索框,当访客在改搜索框中输入关键词进行搜索时,搜索结果页面中显示的都是我们指定的网站的收录页面(前提是我们指定的网站在百度中有一定的收录量)。 主要的原理是利用了百度搜索
- 漂亮的左下角QQ邀请窗口
漂亮的左下角QQ邀请窗口,GIF动图,邀请效果明显。
- 不错的右侧浮动,免费电话调用离线宝接口
不错的右侧浮动,免费电话调用离线宝接口。注意使用离线宝功能请修改调用离线宝接口的ID。 复制代码 代码如下: //引入百度离线宝API 注:data-lxb-uid为百度推广账户ID ,data-lxb-gid为离线宝分组ID可为空,将这两个ID替换为自己医院的 document.writeln(sc
- 医疗站常用的仿QQ窗口抖动效果
医疗站常用的仿QQ窗口抖动效果,使用了jquery的动画效果,调用的时候记得要引入jquery。
随机推荐
- 医疗网站常用的网页左侧浮动咨询菜单
医疗网站常用的网页左侧浮动咨询菜单,包含在线咨询,免费电话,QQ在线,自助挂号,回到顶部菜单,其中免费电话采用离线宝免费电话接口,想要使用该功能请修改代码中的相关参数,具体修改方法参考之前的文章 百度离线宝调用接口 。 代码打包下载: 医疗网站
- 网站底部百度搜索框实现百度搜索结果为指定网站
网站底部百度搜索框实现百度搜索结果为指定网站,在网站底部提供一个百度搜索框,当访客在改搜索框中输入关键词进行搜索时,搜索结果页面中显示的都是我们指定的网站的收录页面(前提是我们指定的网站在百度中有一定的收录量)。 主要的原理是利用了百度搜索
- 漂亮的左下角QQ邀请窗口
漂亮的左下角QQ邀请窗口,GIF动图,邀请效果明显。
- 不错的右侧浮动,免费电话调用离线宝接口
不错的右侧浮动,免费电话调用离线宝接口。注意使用离线宝功能请修改调用离线宝接口的ID。 复制代码 代码如下: //引入百度离线宝API 注:data-lxb-uid为百度推广账户ID ,data-lxb-gid为离线宝分组ID可为空,将这两个ID替换为自己医院的 document.writeln(sc
- 医疗站常用的仿QQ窗口抖动效果
医疗站常用的仿QQ窗口抖动效果,使用了jquery的动画效果,调用的时候记得要引入jquery。