Jquery11_仿QQ右下方提示
来源：互联网 发布：淘宝隐藏优惠券领取 编辑：程序博客网 时间：2024/05/16 05:21
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#tip{ position:fixed;right:0px; bottom:-180px;} <!--定位一定要设置成fixed 不然会随着滚动条改变位置-->
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 默认从浏览器右下角出来
$("#tip").animate({ "bottom": "0px" }, 600);
// 默认4秒后抖动一下
setTimeout(
function () {
for (var i = 0; i < 30; i++) {
var ranNum = parseInt(Math.random() * 8 + 1);
$("#tip").animate({ "bottom": ranNum, "right": ranNum }, 15);
};
// 矫正
$("#tip").animate({ "bottom": "0px", "right": "0px" }, 10);
}, 4000);
// 默认9秒后自动消失
setTimeout(function () {
$("#tip").animate({ "bottom": "-180px" }, 1000)
}, 9000);
// 点击关闭时
$("#close").click(function () {
$("#tip").animate({ "bottom": "-180px" }, 300, function () {
$(this).remove();
});
});
});
</script>
</head>
<body>
<div id="tip">
<table style="width:200px;height:150px;">
<tr style="width:200px;height:25px;background:#CC6633;">
<td>
新的留言板回复 <a id="close" href="#">关闭 X</a>
</td>
</tr>
<tr style="width:200px;height:100px;background:#CCCC99;">
<td>
你的好友(xxx)发表盘了留言赶快去回复吧！点此直接转到留言板http://www.QQZoom.com
</td>
</tr>
<tr style="width:200px;height:25px;background:#CC6633;">
<td style="text-align:right;">
<a href="#">查看</a>
</td>
</tr>
</table>
</div>
</body>
</html>
- Jquery11_仿QQ右下方提示
- 网页右下方弹出提示框
- 网页右下方弹出提示框
- 仿QQ弹出消息提示
- 仿MNS,QQ信息提示效果
- javascript仿QQ右下角提示消息
- air实现仿QQ提示窗口
- java 仿qq消息提示框
- 仿qq底部的提示标记
- wpf实现仿qq消息提示框
- Andriod 仿QQ顶部弹出式提示
- 微仿QQ消息提示点拖拽功能
- 仿qq信息延时提示框
- 仿QQ会员右下角提示框c#实现
- 如何用c#实现仿QQ会员右下角提示框
- Android 仿QQ 5.0 气泡提示 拖动爆炸消除
- 仿QQ会员右下角提示框c#实现
- 从仿QQ消息提示框来谈弹出式对话框
- Extjs gridPanel 单元格中日期类型配置
- 在已排序的数组中寻找和是给定值的两项，要求时间复杂度为O(n)
- 请问得到四元数后怎么计算YAW，ROLL，PITCH？
- Sobel算子及cvSobel（二）
- 通过WebService上传任何类型的文件
- Jquery11_仿QQ右下方提示
- POJ2560_Freckles_最小生成树
- 原创和伪原创你怎么看？
- 开发框架的选择和设计经验谈
- Python异常处理体系简介
- 成都java培训这些你都做到了成功离你不远了
- 23中设计模式总结
- MySQL和PostgreSQL对比
- 【CPU常见故障】
