网页右下角弹出窗体实现代码


Posted in Javascript onJune 05, 2014
<!--开始--> 
<style type="text/css"> 
#msg_win{position:absolute;right:0px;display:none;overflow:hidden;z-index:99;border:1px solid #c00;background:#F9EFFC;width:210px;font-size:12px;margin:0px;} 
#msg_win .icos{position:absolute;top:2px;*top:0px;right:2px;z-index:9;} 
.icos a{float:left;color:#FFFFFF;margin:1px;text-align:center;font-weight:bold;width:14px;height:22px;line-height:22px;padding:1px;text-decoration:none;font-family:webdings;} 
.icos a:hover{color:#FFCC00;} 
#msg_title{background:#FA6705;border-bottom:1px solid #710B97;border-top:1px solid #FFF;border-left:1px solid #FFF;color:#FFFFFF;height:25px;line-height:25px;text-indent:5px;font-weight:bold;} 
#msg_content{margin:1px;margin-right:0;width:210px;height:160px;overflow:hidden; text-align:center} 
</style> 
<!--结束--> <div id="msg_win" style="display:block;top:503px;visibility:visible;opacity:1;"> 
<div class="icos"><a id="msg_min" title="最小化" href="javascript:void 0">_</a><a id="msg_close" title="关闭" href="javascript:void 0">×</a></div> 
<div id="msg_title">标题 
</div> 
<div id="msg_content"> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="210" height="160"> 
<param name="movie" value="flvplayer.swf?vcastr_file=userlogin/video/qlg.flv&IsAutoPlay=1"/> 
<param name="quality" value="high"/> 
<param name="allowFullScreen" value="true" /> 
<embed src="flvplayer.swf?vcastr_file=userlogin/video/qlg.flv&IsAutoPlay=1" allowFullScreen="true" quality="high" 
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="210" height="160"></embed> 
</object> 
</div> 
</div> 
<script type="text/javascript"> 
var Message = { 
set: function () {//最小化与恢复状态切换 
var set = this.minbtn.status == 1 ? [0, 1, 'block', this.char[0], '最小化'] : [1, 0, 'none', this.char[1], '恢复']; 
this.minbtn.status = set[0]; 
this.win.style.borderBottomWidth = set[1]; 
this.content.style.display = set[2]; 
this.minbtn.innerHTML = set[3] 
this.minbtn.title = set[4]; 
this.win.style.top = this.getY().top; 
}, 
close: function () {//关闭 
this.win.style.display = 'none'; 
document.all.xhs1.stop(); 
window.onscroll = null; 
}, 
setOpacity: function (x) {//设置透明度 
var v = x >= 100 ? '' : 'Alpha(opacity=' + x + ')'; 
this.win.style.visibility = x <= 0 ? 'hidden' : 'visible'; //IE有绝对或相对定位内容不随父透明度变化的bug 
this.win.style.filter = v; 
this.win.style.opacity = x / 100; 
}, 
show: function () {//渐显 
clearInterval(this.timer2); 
var me = this, fx = this.fx(0, 100, 0.1), t = 0; 
this.timer2 = setInterval(function () { 
t = fx(); 
me.setOpacity(t[0]); 
if (t[1] == 0) { clearInterval(me.timer2) } 
}, 6); //10 to 6 
}, 
fx: function (a, b, c) {//缓冲计算 
var cMath = Math[(a - b) > 0 ? "floor" : "ceil"], c = c || 0.1; 
return function () { return [a += cMath((b - a) * c), a - b] } 
}, 
getY: function () {//计算移动坐标 
var d = document, b = document.body, e = document.documentElement; 
var s = Math.max(b.scrollTop, e.scrollTop); 
var h = /BackCompat/i.test(document.compatMode) ? b.clientHeight : e.clientHeight; 
var h2 = this.win.offsetHeight; 
return { foot: s + h + h2 + 2 + 'px', top: s + h - h2 - 2 + 'px' } 
}, 
moveTo: function (y) {//移动动画 
clearInterval(this.timer); 
var me = this, a = parseInt(this.win.style.top) || 0; 
var fx = this.fx(a, parseInt(y)); 
var t = 0; 
this.timer = setInterval(function () { 
t = fx(); 
me.win.style.top = t[0] + 'px'; 
if (t[1] == 0) { 
clearInterval(me.timer); 
me.bind(); 
} 
}, 6); //10 to 6 
}, 
bind: function () {//绑定窗口滚动条与大小变化事件 
var me = this, st, rt; 
window.onscroll = function () { 
clearTimeout(st); 
clearTimeout(me.timer2); 
me.setOpacity(0); 
st = setTimeout(function () { 
me.win.style.top = me.getY().top; 
me.show(); 
}, 100); //600 mod 100 
}; 
window.onresize = function () { 
clearTimeout(rt); 
rt = setTimeout(function () { me.win.style.top = me.getY().top }, 100); 
} 
}, 
init: function () {//创建HTML 
function $(id) { return document.getElementById(id) }; 
this.win = $('msg_win'); 
var set = { minbtn: 'msg_min', closebtn: 'msg_close', title: 'msg_title', content: 'msg_content' }; 
for (var Id in set) { this[Id] = $(set[Id]) }; 
var me = this; 
this.minbtn.onclick = function () { me.set(); this.blur() }; 
this.closebtn.onclick = function () { me.close() }; 
this.char = navigator.userAgent.toLowerCase().indexOf('firefox') + 1 ? ['_', '::', '×'] : ['0', '2', 'r']; //FF不支持webdings字体 
this.minbtn.innerHTML = this.char[0]; 
this.closebtn.innerHTML = this.char[2]; 
setTimeout(function () {//初始化最先位置 
me.win.style.display = 'block'; 
me.win.style.top = me.getY().foot; 
me.moveTo(me.getY().top); 
}, 0); 
return this; 
} 
}; 
Message.init(); 
</script>
Javascript 相关文章推荐
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
JS的replace方法介绍
Oct 20 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
Vue.js学习示例分享
Feb 05 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
获取中文字符串的实际长度代码
Jun 05 #Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 #Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 #Javascript
首页图片漂浮效果示例代码
Jun 05 #Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 #Javascript
javascript的事件触发器介绍的实现
Jun 05 #Javascript
javascript中attribute和property的区别详解
Jun 05 #Javascript
You might like
PHP语法速查表
2007/01/02 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
Python装饰器基础详解
2016/03/09 Python
python中int与str互转方法
2018/07/02 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
新闻网站实习自我鉴定
2013/09/25 职场文书
营销总经理岗位职责
2014/02/02 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
大学班级学风建设方案
2014/05/01 职场文书
责任担保书范文
2014/05/21 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书