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


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实现Sleep函数的代码
Mar 04 Javascript
PNG背景在不同浏览器下的应用
Jun 22 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
vuex实现及简略解析(小结)
Mar 01 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
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
keras中的History对象用法
2020/06/19 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
Servlet面试题库
2015/07/18 面试题
经理管理专业自荐信范文
2013/12/31 职场文书
写给女朋友的道歉信
2014/01/08 职场文书
校三好学生主要事迹
2014/01/11 职场文书
征婚广告词
2014/03/17 职场文书
医药营销个人求职信
2014/04/12 职场文书
企业文化标语口号
2014/06/09 职场文书
横幅标语大全
2014/06/17 职场文书
领导班子对照检查材料
2014/09/22 职场文书
单位员工收入证明样本
2014/10/09 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
给朋友的道歉短信
2015/05/12 职场文书
2016高考冲刺决心书
2015/09/23 职场文书