jQuery实现网页右下角悬浮层提示
最近有同事提到类似网页右下角的消息悬浮提示框的制作。我之前也做过一个类似的例子，很简单。是仿QQ消息。现在感觉之前的那个例子只是说了实现原理，整体上给你的感觉还是太丑，今天为大家带来一个新的例子。是Discuz右下角悬浮层提示的。运行效果如下：
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现网页右下角悬浮层提示</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* pop */
#pop{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position:fixed;right:10px;bottom:10px;}
#popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;}
#popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;}
#popHead #popClose{position:absolute;right:10px;top:1px;}
#popHead a#popClose:hover{color:#f00;cursor:pointer;}
#popContent{padding:5px 10px;}
#popTitle a{line-height:24px;font-size:14px;font-family:'微软雅黑';color:#333;font-weight:bold;text-decoration:none;}
#popTitle a:hover{color:#f60;}
#popIntro{text-indent:24px;line-height:160%;margin:5px 0;color:#666;}
#popMore{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;}
#popMore a{color:#f60;}
#popMore a:hover{color:#f00;}
</style>
</head>
<body style="height:1200px;">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
(function($j){
$j.positionFixed = function(el){
$j(el).each(function(){
new fixed(this)
})
return el;
}
$j.fn.positionFixed = function(){
return $j.positionFixed(this)
}
var fixed = $j.positionFixed.impl = function(el){
var o=this;
o.sts={
target : $j(el).css('position','fixed'),
container : $j(window)
}
o.sts.currentCss = {
top : o.sts.target.css('top'),
right : o.sts.target.css('right'),
bottom : o.sts.target.css('bottom'),
left : o.sts.target.css('left')
}
if(!o.ie6)return;
o.bindEvent();
}
$j.extend(fixed.prototype,{
ie6 : $.browser.msie && $.browser.version < 7.0,
bindEvent : function(){
var o=this;
o.sts.target.css('position','absolute')
o.overRelative().initBasePos();
o.sts.target.css(o.sts.basePos)
o.sts.container.scroll(o.scrollEvent()).resize(o.resizeEvent());
o.setPos();
},
overRelative : function(){
var o=this;
var relative = o.sts.target.parents().filter(function(){
if($j(this).css('position')=='relative')return this;
})
if(relative.size()>0)relative.after(o.sts.target)
return o;
},
initBasePos : function(){
var o=this;
o.sts.basePos = {
top: o.sts.target.offset().top - (o.sts.currentCss.top=='auto'?o.sts.container.scrollTop():0),
left: o.sts.target.offset().left - (o.sts.currentCss.left=='auto'?o.sts.container.scrollLeft():0)
}
return o;
},
setPos : function(){
var o=this;
o.sts.target.css({
top: o.sts.container.scrollTop() + o.sts.basePos.top,
left: o.sts.container.scrollLeft() + o.sts.basePos.left
})
},
scrollEvent : function(){
var o=this;
return function(){
o.setPos();
}
},
resizeEvent : function(){
var o=this;
return function(){
setTimeout(function(){
o.sts.target.css(o.sts.currentCss)
o.initBasePos();
o.setPos()
},1)
}
}
})
})(jQuery)
function Pop(title,url,intro){
this.title=title;
this.url=url;
this.intro=intro;
this.apearTime=1000;
this.hideTime=500;
this.delay=10000;
//添加信息
this.addInfo();
//显示
this.showDiv();
//关闭
this.closeDiv();
}
Pop.prototype={
addInfo:function(){
$("#popTitle a").attr('href',this.url).html(this.title);
$("#popIntro").html(this.intro);
$("#popMore a").attr('href',this.url);
},
showDiv:function(time){
if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) {
$('#pop').slideDown(this.apearTime).delay(this.delay).fadeOut(400);;
} else{//调用jquery.fixed.js,解决ie6不能用fixed
$('#pop').show();
jQuery(function($j){
$j('#pop').positionFixed()
})
}
},
closeDiv:function(){
$("#popClose").click(function(){
$('#pop').hide();
}
);
}
}
</script>
<script type="text/javascript" >
//页面加载调用
window.onload=function(){
//使用参数：1.标题，2.链接地址，3.内容简介
new Pop("这里是标题，哈哈",
"http://www.xttblog.com",
"欢迎大家关注我的博客！如有疑问,请加QQ群：135430763共同学习！");
}
</script>
<div id="pop" style="display:none;">
<div id="popHead"> <a id="popClose" title="关闭">关闭</a>
<h2>温馨提示</h2>
</div>
<div id="popContent">
<dl>
<dt id="popTitle"><a href="http://blog.csdn.net/xmtblog/" target="_blank">这里是标题</a></dt>
<dd id="popIntro">这里是内容简介</dd>
</dl>
<p id="popMore"><a href="http://blog.csdn.net/xmtblog/" target="_blank">查看 »</a></p>
</div>
</div>
<div style="text-align:center;clear:both">
<p>欢迎大家关注我的个人博客，或者加qq群135430763共同学习！</p>
<p><a href="http://blog.csdn.net/xmtblog/" target="_blank">伪专家</a></p>
</div>
</body>
</html>欢迎大家关注我的博客！如有疑问,请加QQ群：135430763共同学习！
jQuery实现网页右下角悬浮层提示的更多相关文章
- javascript右下角弹层及自动隐藏
在编写项目中总会需要有个右下角弹层提示公告的需求,怎么用更简单方面,更简洁代码,实现更好用户体验这个就是我们的所要做的内容.市场这块弹层很多,但功能不尽如人意.下面分享早些时候自己编写,以及现在还在应 ...
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn ...
- 一款基于jquery超炫的弹出层提示消息
今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- JS框架_(JQuery.js)网页文字评论弹幕
百度云盘 传送门 密码:3azl jQuery网页右下角文字评论弹幕效果 <!DOCTYPE html> <html> <head> <title>jQ ...
- jquery弹出可关闭遮罩提示框
jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果 效果展示 http://hovertree.com ...
- JS网站右下角悬浮视窗可关闭广告
效果体验:http://hovertree.com/texiao/js/4.htm 网站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chro ...
- jquery弹出关闭遮罩层实例
jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...
- Js_网站右下角悬浮视窗可关闭广告
站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chrome.Safari等主流浏览器.广告图片尺寸300x250. 使用方法:在head区域 ...
- Jquery对网页高度、宽度的操作
Jquery获取网页的宽度.高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: doc ...
随机推荐
- Go语言基础之7--函数详解
一. 函数介绍 1.1 定义 函数:有输入.有输出,用来执行一个指定任务的代码块. func functionname([parametername type]) [return type] { // ...
- 利用Shell脚本实现远程MySQL自动查询
下面这个脚本是一个简单用来执行远程数据库查询的命令,相信大家都能看得懂,这对于有些需要每天自动检查数据库或是执行某些语句的兄弟,是很有帮助的,只要稍加修改就可以 #!/bin/shHOST=192.1 ...
- firewall 端口转发
centos 7 使用背景:某次新购阿里云服务器安装nginx后配置80转8080的内部转发 systemctl status firewalld ---查看守护进程状态systemctl start ...
- 转 Logs are not shipped to the physical standby database
http://www.oracle-ckpt.com/dataguard_troubleshoot_snapper/ ######sample primay scripts: spool dg_Pri ...
- Postman如何做接口测试
Postman 之前是作为Chrome 的一个插件,现在要下载应用才能使用. 以下是postman 的界面: 各个功能区的使用如下: 快捷区: 快捷区提供常用的操作入口,包括运行收藏夹的一组测试数据, ...
- keil版本控制
keil5.15才有对git svn的支持,之前的有其它的svcs; http://www.keil.com/appnotes/files/apnt_279.pdf http://stdbit.c ...
- Mac 安装YCM
① 安装Xcode的同时, 安装配套的命令行工具, 包括git, cmake, clang ② 安装Macvim, 并在~/.bashrc文件中设定别名, alias vim="/path/ ...
- HDU 2121——Ice_cream’s world II——————【最小树形图、不定根】
Ice_cream’s world II Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64 ...
- jq中哪个方法有回调函数
animate();id为btn的div ,位置由页面下方-100px出现,后消失 $(“#btn”).animate({ position:"absolute",bottom:& ...
- C#入门--索引器
C#入门--索引器 索引器允许类或结构的实例按照与数组相同的方式进行索引.索引器类似于属性,不同之处在于它们的访问器采用参数. 索引器概述 索引器使得对象可按照与数组相似的方法进行索引. get 访问 ...