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


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 相关文章推荐
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
React更新渲染原理深入分析
Dec 24 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
apache配置虚拟主机的方法详解
2013/06/17 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
Python加载带有注释的Json文件实例
2018/05/23 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
如何通过python计算圆周率PI
2020/11/11 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
三维科技面试题
2013/07/27 面试题
委托证明的格式
2014/01/10 职场文书
爱国演讲稿400字
2014/05/07 职场文书
党员演讲稿
2014/09/04 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
教师个人总结范文
2015/02/11 职场文书
关于召开会议的通知
2015/04/15 职场文书
2015年底工作总结范文
2015/05/15 职场文书
2015年财政局工作总结
2015/05/21 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis