• 回忆之浮窗


    直接看效果点这里

    HTML

    <!DOCTYPE html>
    <html>
    <head lang="zh-CN">
        <meta charset="utf-8">
        <title> 浮窗 </title>
        <style>
            * { margin: 0; padding: 0; }
            .staff { width: 1200px; margin: 0 auto; height: 800px; line-height: 800px; text-align: center; font-size: 40px; background-color: #ccc; }
            .mod {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body style="height: 2000px">
    <div class="staff">width*1200</div>
    <div class="mod t-l">top left</div>
    <div class="mod t-c">top center</div>
    <div class="mod t-r">top right</div>
    
    <div class="mod c-l">center left</div>
    <div class="mod c-c">center center</div>
    <div class="mod c-r">center right</div>
    
    <div class="mod b-l">bottom left</div>
    <div class="mod b-c">bottom center</div>
    <div class="mod b-r">bottom right <a href="javascript:;" class="J_BackTop">返回</a></div>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="jquery.popup.js"></script>
    <script>
        $('.t-l').popup({
            'pos': 'top left',
            'screenWidth': 1200
        });
    
        $('.t-c').popup({
            'pos': 'top center',
            'screenWidth': 1200
        });
    
        $('.t-r').popup({
            'pos': 'top right',
            'screenWidth': 1200
        });
    
    
        $('.c-l').popup({
            'pos': 'center left',
            'screenWidth': 1200
        });
    
        $('.c-c').popup({
            'pos': 'center center',
            'screenWidth': 1200
        });
    
        $('.c-r').popup({
            'pos': 'center right',
            'screenWidth': 1200
        });
    
    
        $('.b-l').popup({
            'pos': 'bottom left',
            'screenWidth': 1200
        });
    
        $('.b-c').popup({
            'pos': 'bottom center',
            'screenWidth': 1200
        });
    
        $('.b-r').popup({
            'pos': 'bottom right',
            'screenWidth': 1200,
            'backTop': 400
        });
    </script>
    </body>
    </html>
    View Code

    JS

    /**
     * @description: 浮窗
     * @author: jununx@gmail.com
     * @update: 2014/11/10
     *
     * @param pos{string} 定位位置,可选 ['top left', 'top center', 'top right', 'center left', 'center center', 'center right', 'bottom left', 'bottom center', 'bottom right']
     * @param screenWidth{number} 可选,贴近页面宽,例如:页面主体宽960,想让浮窗贴着主体对齐时设置这个宽度
     * @param backTop{number|object} 如果有参数就表示这个对象或者里面的子元素有返回顶部,如果是number就表示speed,如果是object就给里面需要返回顶端功能的元素设置{'childClass': 'yourClassName', 'speed': number}
     */
    
    ;(function($){
    
        var methods = {
            init: function(opts){
                this.bindEvents(opts);
            },
            isIE6: function(){
                return (!-[1,] && !window.XMLHttpRequest);
            },
            setPos: function(opts){
                var win = $(window),
                    scrollLeft = this.isIE6() ? win.scrollLeft() : 0,
                    scrollTop = this.isIE6() ? win.scrollTop() : 0,
                    winW = win.width(),
                    winH = win.height(),
                    objW = opts.that.width(),
                    objH = opts.that.height(),
                    winHalfW = (winW - objW) / 2,
                    winHalfH = (winH - objH) / 2,
                    screenWidth = opts.screenWidth,
                    screenLeft = screenWidth ? (winW - screenWidth) / 2 - objW : 0,
                    screenRight = screenWidth ? (winW - screenWidth) / 2 + screenWidth : winW - objW,
                    pos = {
                        'top left': {
                            'top': scrollTop,
                            'left': screenLeft
                        },
                        'top center': {
                            'top': scrollTop,
                            'left': winHalfW
                        },
                        'top right': {
                            'top': scrollTop,
                            'left': screenRight
                        },
                        'center left': {
                            'top': winHalfH + scrollTop,
                            'left': screenLeft
                        },
                        'center center': {
                            'top': winHalfH + scrollTop,
                            'left': winHalfW + scrollLeft
                        },
                        'center right': {
                            'top': winHalfH + scrollTop,
                            'left': screenRight
                        },
                        'bottom left': {
                            'top': winH - objH + scrollTop,
                            'left': screenLeft
                        },
                        'bottom center': {
                            'top': winH - objH + scrollTop,
                            'left': winHalfW + scrollLeft
                        },
                        'bottom right': {
                            'top': winH - objH + scrollTop,
                            'left': screenRight
                        }
                    };
    
                if(this.isIE6()){
                    opts.that.css('position', 'absolute').css(pos[opts.pos]);
                }else{
                    opts.that.css('position', 'fixed').css(pos[opts.pos]);
                }
            },
            bindEvents: function(opts){
                var that = this;
                $(window).on('load scroll resize', function(){
                    that.setPos(opts);
                });
                if (typeof opts.backTop === 'number') {
                    opts.that.on('click', function(){
                        that.backTop(opts.backTop);
                    });
                } else if (typeof opts.backTop === 'object') {
                    opts.that.find('.'+opts.backTop.childClass).on('click', function(){
                        that.backTop(opts.backTop.speed);
                    });
                }
            },
            backTop: function(speed){
                $('html, body').animate({'scrollTop': 0}, speed);
                return false;
            }
        };
    
        $.fn.popup = function(opts){
            opts = $.extend({
                'that': this,
                'pos': 'bottom right',
                'screenWidth': 0,
                'backTop': 0
            }, opts || {});
            methods.init(opts);
            return this;
        };
    
    })(jQuery);
    
    //use
    $('.t-l').popup({
            'pos': 'top left',
            'screenWidth': 1200
        });
    
        $('.t-c').popup({
            'pos': 'top center',
            'screenWidth': 1200
        });
    
        $('.t-r').popup({
            'pos': 'top right',
            'screenWidth': 1200
        });
    
    
        $('.c-l').popup({
            'pos': 'center left',
            'screenWidth': 1200
        });
    
        $('.c-c').popup({
            'pos': 'center center',
            'screenWidth': 1200
        });
    
        $('.c-r').popup({
            'pos': 'center right',
            'screenWidth': 1200
        });
    
    
        $('.b-l').popup({
            'pos': 'bottom left',
            'screenWidth': 1200
        });
    
        $('.b-c').popup({
            'pos': 'bottom center',
            'screenWidth': 1200
        });
    
        $('.b-r').popup({
            'pos': 'bottom right',
            'screenWidth': 1200,
            'backTop': 400
        });
  • 相关阅读:
    从 java 代码到 android 进程的详细过程
    c++ 智能指针
    linux 进程间共享内存示例
    visual studio 在windows远程调试 linux 程序 cout 输出乱码
    wcf restful 访问报错 *.svc HTTP error 404.17
    c++ 创建 uuid guid
    c++ 事件回调 java
    java通过jna调用so
    java执行jar包
    java调用com组件com4j
  • 原文地址:https://www.cnblogs.com/jununx/p/4472910.html
走看看 - 开发者的网上家园