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


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倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
javascript中 try catch用法
Aug 16 Javascript
js倒计时简单实现代码
Aug 11 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
React中Ref 的使用方法详解
Apr 28 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
虫族 ZERG 概述
2020/03/14 星际争霸
set_include_path在win和linux下的区别
2008/01/10 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
Python学习笔记之os模块使用总结
2014/11/03 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
python实现自动发送邮件
2018/06/20 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
委托证明的格式
2014/01/10 职场文书
品质标语大全
2014/06/21 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
病危通知单
2015/04/17 职场文书
2015年材料员工作总结
2015/04/30 职场文书
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技