前端工作中碰到的一些东西

久不出技术类文章，我都忘了自己是一程序员啦......今天写一点工作中遇到的东西，大家共同学习，反正也比较浅显了。

在安图等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站建设、网站建设 网站设计制作按需求定制制作,公司网站建设,企业网站建设,品牌网站建设,营销型网站建设,成都外贸网站建设公司,安图网站建设费用合理。

弹出窗口

我们在工作中，经常会碰到弹出窗口类应用，有时候还需要一点遮盖层：

这类圆角弹出框其实用得还是很广泛的，用CSS3可以很容易的出现，但是考虑到浏览器兼容问题，这类还是需要用图片实现了

主要代码如下：

 
 
 
 
      
  
  
  
  1. //弹出层剧中   
    2.   
  
  
  
  2.        function popup(popupName) {   
    3.   
  
  
  
  3.            var _scrollHeight = $(document).scrollTop(); //获取当前窗口距离页面顶部高度   
    4.   
  
  
  
  4.            _windowHeight = $(window).height(); //获取当前窗口高度   
    5.   
  
  
  
  5.            _windowWidth = $(window).width(); //获取当前窗口宽度   
    6.   
  
  
  
  6.            _popupHeight = popupName.height(); //获取弹出层高度   
    7.   
  
  
  
  7.            _popupWeight = popupName.width(); //获取弹出层宽度   
    8.   
  
  
  
  8.            //            _posiTop = (_windowHeight - _popupHeight) / 2 + _scrollHeight - 50;   
    9.   
  
  
  
  9.            _posiTop = _scrollHeight + 120;   
    10.   
  
  
  
  10.            _posiLeft = (_windowWidth - _popupWeight) / 2;   
    11.   
  
  
  
  11.            popupName.css({ "left": _posiLeft + "px", "top": _posiTop + "px", "display": "block" }); //设置position   
    12.   
  
  
  
  12.        }   
    13.   
  
  
  
  13.    
    14.   
  
  
  
  14.        function dragFunc(dragDiv, dragBody) {   
    15.   
  
  
  
  15.            if (dragDiv[0] && dragBody[0]) {   
    16.   
  
  
  
  16.                var dragAble = false;   
    17.   
  
  
  
  17.                var x1 = 0;   
    18.   
  
  
  
  18.                var y1 = 0;   
    19.   
  
  
  
  19.                var l = 0;   
    20.   
  
  
  
  20.                var t = 0;   
    21.   
  
  
  
  21.                var divOffset = dragBody.offset();   
    22.   
  
  
  
  22.                dragDiv.mousedown(function (e) {   
    23.   
  
  
  
  23.                    var ss = this;   
    24.   
  
  
  
  24.                    //                    var rootId =    
    25.   
  
  
  
  25.    
    26.   
  
  
  
  26.                    dragDiv.css("cursor", "move");   
    27.   
  
  
  
  27.                    dragAble = true;   
    28.   
  
  
  
  28.                    // 当前鼠标距离div边框的距离   
    29.   
  
  
  
  29.                    // 当前鼠标坐标，减去div相对左边的像素   
    30.   
  
  
  
  30.                    l = parseInt(dragBody.css("left"));   
    31.   
  
  
  
  31.                    t = parseInt(dragBody.css("top"));   
    32.   
  
  
  
  32.                    x1 = e.clientX - l;   
    33.   
  
  
  
  33.                    y1 = e.clientY - t;   
    34.   
  
  
  
  34.                    x1x1 = x1 > 0 ? x1 : 0;   
    35.   
  
  
  
  35.                    y1y1 = y1 > 0 ? y1 : 0;   
    36.   
  
  
  
  36.                    this.setCapture && this.setCapture();   
    37.   
  
  
  
  37.                });   
    38.   
  
  
  
  38.                dragDiv.mousemove(function (e) {   
    39.   
  
  
  
  39.                    if (!dragAble)   
    40.   
  
  
  
  40.                        return;   
    41.   
  
  
  
  41.                    // 当前div左边的坐标   
    42.   
  
  
  
  42.                    // 当前鼠标坐标，减去鼠标拖动量   
    43.   
  
  
  
  43.                    var x2 = 0;   
    44.   
  
  
  
  44.                    var y2 = 0;   
    45.   
  
  
  
  45.                    //需要考虑滚动条问题！！！   
    46.   
  
  
  
  46.                    var top = $(document).scrollTop() ? $(document).scrollTop() - 15 : 0;   
    47.   
  
  
  
  47.                    var left = $(document).scrollLeft() ? $(document).scrollLeft() - 15 : 0;   
    48.   
  
  
  
  48.                    x2 = e.clientX - x1 + left;   
    49.   
  
  
  
  49.                    y2 = e.clientY - y1 + top;   
    50.   
  
  
  
  50.                    x2x2 = x2 > 0 ? x2 : 0;   
    51.   
  
  
  
  51.                    y2y2 = y2 > 0 ? y2 : 0;   
    52.   
  
  
  
  52.                    //要移动一定数量才移动   
    53.   
  
  
  
  53.                    if (Math.abs(l - x2) > 10 || Math.abs(t - y2) > 10) {   
    54.   
  
  
  
  54.                        dragBody.css("left", x2 + "px");   
    55.   
  
  
  
  55.                        dragBody.css("top", y2 + "px");   
    56.   
  
  
  
  56.                    }   
    57.   
  
  
  
  57.                });   
    58.   
  
  
  
  58.                dragDiv.mouseup(function (event) {   
    59.   
  
  
  
  59.                    if (!dragAble)   
    60.   
  
  
  
  60.                        return;   
    61.   
  
  
  
  61.                    dragAble = false;   
    62.   
  
  
  
  62.                    // dragDiv.css("position", "relative");   
    63.   
  
  
  
  63.                    this.releaseCapture && this.releaseCapture();   
    64.   
  
  
  
  64.                });   
    65.   
  
  
  
  65.            }   
    66.   
  
  
  
  66.        }   
    67.   
  
  
  
  67.    
    68.   
  
  
  
  68.        var MyDialog = function (cfg) {   
    69.   
  
  
  
  69.            this.config = {   
    70.   
  
  
  
  70.                id: (new Date()).getTime().toString(),   
    71.   
  
  
  
  71.                el: null,   
    72.   
  
  
  
  72.                bodyId: null,   
    73.   
  
  
  
  73.                cover: true,   
    74.   
  
  
  
  74.                boxHtm: '  ' +   
    75.   
  
  
  
  75.        '   ' +   
  76.        '      ' +   
  77.        '        ' +   
  78.        '         ' +   
  79.        '         ' +   
  80.        '         ' +   
  81.        '         ' +   
  82.        '         ' +   
  83.        '     ' +   
  84.        '    
    85.  ' +   
  85.        '         ' +   
  86.        '          ' +   
  87.        '         ' +   
  88.        '         ' +   
  89.        '             ' +   
  90.        '                
     ' +   
  91.        '                    请输入标题  ' +   
  92.        '                 ' +   
  93.        '             ' +   
  94.        '             ' +   
  95.        '             请输入内容   ' +   
  96.        '             ' +   
  97.        '         ' +   
  98.        '         ' +   
  99.        '         ' +   
  100.        '    
    101.  ' +   
  101.        '     ' +   
  102.        '         ' +   
  103.        '         ' +   
  104.        '         ' +   
  105.        '          ' +   
  106.        '         ' +   
  107.        '         ' +   
  108.        '         ' +   
  109.        '     ' +   
  110.        '
    111.   
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
  
      
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
  
      
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
    
  
  
  
     ' +   
    111.   
  
  
  
  111.    '
'  
  •            };   
  •            var scope = this;   
  •            if (cfg) {   
  •                $.each(cfg, function (key, value) {   
  •                    scope.config[key] = value;   
  •                });   
  •            }   
  •            this.box = null;   
  •            this.cover = null;   
  •            this.tmpBody = null;   
  •        }   
  •    
  •    
  •        MyDialog.prototype.show = function () {   
  •            var scope = this;   
  •            var cover = null;   
  •            var box = null;   
  •            if (this.config.cover) {   
  •                if (this.config.id && $('#' + this.config.id + '_cover')[0]) {   
  •                    cover = $('#' + this.config.id + '_cover');   
  •                    cover.show();   
  •                } else {   
  •                    cover = $('
    • ');   
  •                    $('body').append(cover);   
  •                }   
  •                scope.cover = cover;   
  •            }   
  •            if (!$('#' + this.config.id)[0]) {   
  •                box = $(this.config.boxHtm);   
  •                $('body').append(box);   
  •                box.attr('id', this.config.id);   
  •                if (this.config.title) {   
  •                    box.find('.title_text').html(this.config.title);   
  •                }   
  •                if (this.config.bodyId) {   
  •                    var body = $('#' + this.config.bodyId);   
  •                    var tmp = $('
    ').append(body);   
  •                    var initBody = tmp.html();   
  •                    scope.tmpBody = $(initBody);   
  •                    tmp = null;   
  •                    if (body[0]) {   
  •                        var con = box.find('.main .content');   
  •                        body.show();   
  •                        con.html('');   
  •                        con.append(body);   
  •                    }   
  •                }   
  •                if (this.config.el && this.config.el[0]) {   
  •                    var con = box.find('.main .content');   
  •                    con.html(this.config.el);   
  •                }   
  •                //居中   
  •                popup(box);   
  •                //关闭dialog   
  •                box.find('.title .cls').click(function (e) {   
  •                    scope.close();   
  •                    e.preventDefault();   
  •                    return false;   
  •                });   
  •    
  •                dragFunc($('#' + this.config.id + ' .main .title'), $('#' + this.config.id));   
  •                box.show();   
  •                this.box = box;   
  •            }   
  •        }   
  •        MyDialog.prototype.close = function () {   
  •            //这里有问题   
  •            var box = this.box;   
  •            var tmpBody = this.tmpBody;   
  •            var cover = this.cover;   
  •            if (tmpBody && tmpBody[0]) {   
  •                $('body').append(tmpBody);   
  •            }   
  •            if (box && box[0]) {   
  •                box.remove();   
  •            }   
  •            if (cover && cover[0]) {   
  •                cover.hide();   
  •            }   
  •        }; 

    • 调用方法：

     
 
 
 
        
  
  
  
    1. var dia = new MyDialog({   
      2.   
  
  
  
    2.                 title : title,   
      3.   
  
  
  
    3.                 bodyId : id,   
      4.   
  
  
  
    4.                 id : id + '_box'  
      5.   
  
  
  
    5.             });   
      6.   
  
  
  
    6.             dia.show(); 
      7.

    具体可能还需要一定函数回调，各位可以自己封装一番。

    拖放

    工作中也经常会出现拖放效果的一些需求：

    代码如下：

     
 
 
 
        
  
  
  
    1.    
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.    
      4.   
  
  
  
    4.        
      5.   
  
  
  
    5.        
      6.   
  
  
  
    6.        
      7.   
  
  
  
    7.     
      8.   
  
  
  
    8.         function dragFunc(dragDiv, dragBody, dropBody) {   
      9.   
  
  
  
    9.             if (!dropBody[0]) {   
      10.   
  
  
  
    10.                 dropBody = $(document);   
      11.   
  
  
  
    11.             }   
      12.   
  
  
  
    12.             if (dragDiv[0] && dragBody[0]) {   
      13.   
  
  
  
    13.                 var dragAble = false;   
      14.   
  
  
  
    14.                 var x1 = 0;   
      15.   
  
  
  
    15.                 var y1 = 0;   
      16.   
  
  
  
    16.                 var l = 10;   
      17.   
  
  
  
    17.                 var t = 10;   
      18.   
  
  
  
    18.                 var init_position = '';   
      19.   
  
  
  
    19.                 var init_cursor = '';   
      20.   
  
  
  
    20.                 var tmp_body = null;   
      21.   
  
  
  
    21.     
      22.   
  
  
  
    22.                 dragDiv.mousedown(function (e) {   
      23.   
  
  
  
    23.                     var ss = this;   
      24.   
  
  
  
    24.     
      25.   
  
  
  
    25.                     init_position = dragBody.css("position");   
      26.   
  
  
  
    26.                     init_cursor = dragBody.css("init_cursor");   
      27.   
  
  
  
    27.                     dragBody.css("position", "absolute");   
      28.   
  
  
  
    28.                     dragDiv.css("cursor", "move");   
      29.   
  
  
  
    29.     
      30.   
  
  
  
    30.                     tmp_body = $('
    ');   
  •                     tmp_body.css('width', dragBody.css('width'));   
  •                     tmp_body.css('height', dragBody.css('height'));   
  •                     tmp_body.insertAfter(dragBody);   
  •                     $(document).bind("selectstart", function () { return false; });     
  •     
  •     
  •                     dragAble = true;   
  •                     // 当前鼠标距离div边框的距离   
  •                     // 当前鼠标坐标，减去div相对左边的像素   
  •                     l = parseInt(dragBody.css("left")) ? parseInt(dragBody.css("left")) : 10;   
  •                     t = parseInt(dragBody.css("top")) ? parseInt(dragBody.css("top")) : 10;   
  •     
  •                     var offset = dragBody.offset();   
  •     
  •                     l = parseInt(offset.left);   
  •                     t = parseInt(offset.top);   
  •     
  •                     x1 = e.clientX - l;   
  •                     y1 = e.clientY - t;   
  •                     x1x1 = x1 > 0 ? x1 : 0;   
  •                     y1y1 = y1 > 0 ? y1 : 0;   
  •                     this.setCapture && this.setCapture();   
  •                 });   
  •                 dragDiv.mousemove(function (e) {   
  •                     if (!dragAble)   
  •                         return;   
  •                     // 当前div左边的坐标   
  •                     // 当前鼠标坐标，减去鼠标拖动量   
  •                     var x2 = 0;   
  •                     var y2 = 0;   
  •                     //需要考虑滚动条问题！！！   
  •                     var top = $(document).scrollTop() ? $(document).scrollTop() - 15 : 0;   
  •                     var left = $(document).scrollLeft() ? $(document).scrollLeft() - 15 : 0;   
  •                     x2 = e.clientX - x1 + left;   
  •                     y2 = e.clientY - y1 + top;   
  •                     x2x2 = x2 > 0 ? x2 : 0;   
  •                     y2y2 = y2 > 0 ? y2 : 0;   
  •                     //要移动一定数量才移动   
  •                     if (Math.abs(l - x2) > 10 || Math.abs(t - y2) > 10) {   
  •                         dragBody.css("left", x2 + "px");   
  •                         dragBody.css("top", y2 + "px");   
  •                     }     
  •                     //红 #993300   
  •                     //灰 #DBEAF9   
  •                     //移动结束后判断拖放   
  •                     var w = parseInt(dragBody.css('width'));   
  •                     var h = parseInt(dragBody.css('height'));   
  •                     $.each(dropBody, function () {   
  •                         var el = $(this);   
  •                         el.css('background-color', 'Gray');   
  •                         var offset = el.offset();   
  •     
  •                         var _l = offset.left || 0;   
  •                         var _t = offset.top || 0;   
  •                         var _w = parseInt(el.css('width'));   
  •                         var _h = parseInt(el.css('height'));   
  •     
  •                         if (x2 > _l && x2 + w < _l + _w && y2 > _t && y2 + h < _t + _h) {   
  •                             el.css('background-color', '#DBEAF9');   
  •                                 
  •                             el.append(tmp_body);   
  •     
  •                         }   
  •     
  •                         var s = '';   
  •     
  •                     });   
  •     
  •                 });   
  •                 dragDiv.mouseup(function (event) {   
  •                     if (!dragAble)   
  •                         return;   
  •     
  •                     $(document).unbind("selectstart");     
  •     
  •                     //还原position 与 cursor   
  •                     dragBody.css("position", init_position);   
  •                     dragBody.css("cursor", init_cursor);   
  •     
  •                     //dragBody.css("left", '0');   
  •                     //dragBody.css("top", '0');   
  •                     if (tmp_body) {   
  •                         dragBody.insertAfter(tmp_body);   
  •                         var offset = tmp_body.offset();   
  •                         l = parseInt(offset.left);   
  •                         t = parseInt(offset.top);   
  •                        

    本文名称：前端工作中碰到的一些东西
    URL网址：http://www.mswzjz.com/qtweb/news14/164964.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站设计公司知识

    同城分类信息

    成都品牌网站建设　　 　成都网站建设　　 　大橙子网站建设　　 　全网营销　　 　四川成都网站制作　　 　网站制作　　 　移动APP　　 　成都网站建设　　 　鑫友邦火锅桌　　 　成都主机托管　　 　成都网站运维　　 　上市集团网站建设　　 　成都发电机维修　　 　关键词优化排名　　 　犀浦门窗定制　　 　成都响应式网站建设公司　　 　成都微信公众号开发　　 　光华村机房　　 　品牌网站建设　　 　尊格展览