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


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 相关文章推荐
Javascript中的变量使用说明
May 18 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
vue组件与复用详解
Apr 08 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
获取中文字符串的实际长度代码
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
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
python的re模块应用实例
2014/09/26 Python
python类和继承用法实例
2015/07/07 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Django缓存系统实现过程解析
2019/08/02 Python
Django框架模板用法入门教程
2019/11/04 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
tensorflow 查看梯度方式
2020/02/04 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
创建文明学校实施方案
2014/03/11 职场文书
董事长秘书工作职责
2014/06/10 职场文书
英语专业求职信
2014/07/08 职场文书
春节晚会开场白
2015/05/29 职场文书