* 在支持position:fixed的浏览器上使用position:fixed,这样当拖动共同条的时候弹窗位置是固定的。
* 优化了IE6下onscroll 事件绑定的函数
还需改进的地方(过段事件等项目应用的时候会修改):
* 30秒后自动关闭
* 方便的插入弹出内容
- var RBMessage={
- boxW:200,
- boxH:101,
- init:function(){
- var that = this;
- this.createBox();
- document.getElementById("msg_close").onclick = function() {
- that.BoxWin.style.display="none";
- }
- },
- bind: function() { //绑定窗口滚动条与大小变化事件
- var that = this,
- st, rt;
- window.onscroll = function() {
- if( !!window.ActiveXObject && !window.XMLHttpRequest ){
- clearTimeout(st);
- clearTimeout(that.timer2);
- that.setOpacity(0);
- st = setTimeout(function() {
- that.BoxWin.style.top = that.getY().top;
- that.show();
- },500);
- }
- };
- window.onresize = function(){
- if (!!window.ActiveXObject && !window.XMLHttpRequest) {
- clearTimeout(rt);
- rt = setTimeout(function(){
- that.BoxWin.style.top = that.getY().top
- }, 100);
- }
- }
- },
- show: function() { //渐显
- clearInterval(this.timer2);
- var that = this,
- fx = this.fx(0, 100, 0.1),
- t = 0;
- this.timer2 = setInterval(function() {
- t = fx();
- that.setOpacity(t[0]);
- if (t[1] == 0) {
- clearInterval(that.timer2)
- }
- },
- 10);
- },
- 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]
- }
- },
- setOpacity: function(x) { //设置透明度
- var v = x >= 100 ? ‘‘: ‘Alpha(opacity=‘ + x + ‘)‘;
- this.BoxWin.style.visibility = x < = 0 ? ‘hidden‘: ‘visible‘; //IE有绝对或相对定位内容不随父透明度变化的bug
- this.BoxWin.style.filter = v;
- this.BoxWin.style.opacity = x / 100;
- },
- 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.BoxWin.offsetHeight;
- return {
- foot: s + h + h2 + 2 + ‘px‘,
- top: s + h – h2 – 2 + ‘px‘
- }
- },
- moveTo: function(y) { //移动动画
- clearInterval(this.timer);
- var that = this;
- var moveTopNum=-that.boxH;
- this.timer = setInterval(function() {
- moveTopNum+=5;
- that.BoxWin.style.bottom = moveTopNum +‘px‘;
- if (moveTopNum >= 0) {
- clearInterval(that.timer);
- that.bind();
- }
- },50);
- return this;
- },
- createBox:function(){
- this.BoxWin=document.createElement(‘div‘);
- this.BoxWin.style.width = this.boxW+"px";
- this.BoxWin.style.height = this.boxH+"px";
- this.BoxWin.style.bottom = – this.boxH+"px";
- this.BoxWin.id = "msg_win";
- this.BoxWin.innerHTML = ‘<div class="icos"><a href="javascript:void 0" title="关闭" id="msg_close">X</a></div><div id="msg_title">温馨提示(标题)</div><div id="msg_content"></div>‘;
- document.body.appendChild(this.BoxWin);
- var that = this;
- setTimeout(function() { //初始化最先位置
- that.BoxWin.style.display = ‘block‘;
- that.moveTo();
- },1000);
- return this;
- }
- };
- RBMessage.init();