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


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实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
jquery实现显示已选用户
Jul 21 Javascript
js中跨域方法原理详解
Jul 19 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 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
php5新改动之短标记启用方法
2008/09/11 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
php swoft框架实例用法
2020/12/22 PHP
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Python numpy数组转置与轴变换
2019/11/15 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
销售行政专员岗位职责
2014/06/10 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
Python实现照片卡通化
2021/12/06 Python
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
Python使用永中文档转换服务
2022/05/06 Python