zoukankan      html  css  js  c++  java
  • 广告悬浮窗

    #msg_win{
        position:absolute;
        left:0px;
        display:none;
        overflow:hidden;
        z-index:99;
        border:1px solid #c00;
        350px;
        font-size:12px;
        margin:0px;
        background-color: #FDFFDA;
    } 
    #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;14px;height:22px;line-height:22px;padding:1px;text-decoration:none;font-family:webdings;} 
    .icos a:hover{color:#FFCC00;} 
    #msg_title{
        border-bottom:1px solid #710B97;
        border-top:1px solid #FFF;
        border-left:1px solid #FFF;
        color:#FFFFFF;
        height:25px;
        line-height:30px;
        text-indent:5px;
        font-weight:bold;
        background-color: #B21C01;
        font-size: 14px;
    } 
    #msg_content{margin:5px;margin-right:0;340px;overflow:hidden;} 
     <div id="msgWindow" style="position: fixed; right:285px;margin-top:200px;">
            <div id="msg_win" style="display: block; visibility: visible; opacity: 1;280px;">
                <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">
                    <p  style="color:#0026ff;">申报企业有账号和申报问题请直接联系主管部门<br />如有技术问题请拨打技术支持电话
    </p>
    </div>
            </div>
        </div>
    
    
    <script type="text/javascript">
        $(document).ready(function () {
            initMsg();
    
            $.get("/msg.asp", function (result) {
    
                if (result == "") {
                    $('#msgWindow').hide();
                } else {
                    $('#msgWindow').show();
                    $('#msg_content').html(result);
                }
    
            });
    
        });
    
    
        function initMsg() {
            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';
                    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'} 
                    return { foot: -2 * h2 + 2 + 'px', top: -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>
    View Code
  • 相关阅读:
    学习进度03
    构建之法阅读笔记03
    软件工程结队作业01
    用图像算法增强夜视效果
    python将指定目录下的所有文件夹用随机数重命名
    python脚本中调用其他脚本
    opencv+python实现图像锐化
    机器学习中减弱不同图像数据色调及颜色深浅差异
    python利用列表文件遍历
    python文件处理-检查文件名/路径是否正确
  • 原文地址:https://www.cnblogs.com/shadow-wolf/p/6795825.html
Copyright © 2011-2022 走看看