jquery插件整合,A:拖拽dialog的jq插件 B:进度条的jq插件 C:锁屏的jq插件 D:回顶部的jq插件 E:简单可控提示仿alert的js插件
博客专区 > BeGit 的博客 > 博客详情
jquery插件整合,A:拖拽dialog的jq插件 B:进度条的jq插件 C:锁屏的jq插件 D:回顶部的jq插件 E:简单可控提示仿alert的js插件
BeGit 发表于6个月前
jquery插件整合,A:拖拽dialog的jq插件 B:进度条的jq插件 C:锁屏的jq插件 D:回顶部的jq插件 E:简单可控提示仿alert的js插件
  • 发表于 6个月前
  • 阅读 24
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: jquery插件整合 A:拖拽dialog的jq插件 B:进度条的jq插件 C:锁屏的jq插件 D:回顶部的jq插件 E:简单可控提示仿alert的js插件

jquery插件整合

A:拖拽dialog,B:进度条,C:锁屏,D:回顶部

 

A:拖拽dialog:common_drag_div.js

;(function($) {
    /**
     * 拖拽dialog
     */
   $.drag_div = function(options) {};
   $.extend($.drag_div.prototype, {
         defaults: {
                    classes: {
                        "my_ui_widget_content": "my_ui_widget_content",
                        "ui_widget_header": "ui_widget_header",
                        "ui_widget_header_close": "ui_widget_header_close",            
                        "stable_div": "stable_div",     
                        "my_ui_widget_content_info": "my_ui_widget_content_info"            
                    },
                    styles:{
                        my_ui_widget_content :{
                            'position':'absolute',
                            'left':'10%',
                            'top':'5%',
                             'z-index':'9991',
                            'border': '1px solid #c5c5c5',
                            'background': '#ffffff',
                            'padding':'10px',
                            'overflow-x':'hidden',
                            'overflow-y':'auto',
                            'max-width':'500px',
                            '_width':'expression(document.body.clientWidth > 500? "500px": "auto" )',
                            'max-height':'320px',
                            '_height':'expression(document.body.clientHeight > 320 ? "320px" : "auto")',
                             'filter': 'alpha(opacity=90)',  
                            '-moz-opacity':'0.9',  
                            'opacity': '0.9'
                        },
                        my_ui_widget_content_info:{
                            'overflow-y':'auto',
                             'border': '1px solid #c5c5c5',
                              'max-height':'180px',
                            '_height':'expression(document.body.clientHeight > 180 ? "180px" : "auto")'
                        },
                        ui_widget_header :{
                            'display':'inline-block',
                            'width':'85%',
                            'text-align':'center',
                            'padding':'5px',
                            'border': '1px solid #dddddd',
                            'background': '#e9e9e9',
                            'color': '#333333',
                            'font-size':'20px',
                            'font-weight': 'bold',
                             'cursor': 'move'
                        },
                        ui_widget_header_close:{
                            'display':'inline-block',
                            'width':'10%',
                            'text-align':'center',
                            'padding':'5px',
                            'border': '1px solid #c5c5c5',
                            'background': '#f6f6f6',
                            'color': '#333333',
                            'font-size':'20px',
                            'font-weight': 'bold',
                            'cursor': 'pointer'
                        },
                        stable_div:{
                        }
                    }
          }
   });
    
   /**
    * jquery封装功能
    */
  $.fn.dragDiv = function(divWrap,callback) {
    if(!divWrap){
        divWrap = ".my_ui_widget_content";
    }
    return this.each(function() {
      var $divMove = $(this);//鼠标可拖拽区域
      var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove;//整个移动区域
      var mX = 0, mY = 0;//定义鼠标X轴Y轴
      var dX = 0, dY = 0;//定义div左、上位置
      var isDown = false;//mousedown标记
      if(document.attachEvent) {//ie的事件监听,拖拽div时禁止选中内容,firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
        $divMove[0].attachEvent('onselectstart', function() {
          return false;
        });
      }
    
      $divMove.mousedown(function(event) {
        var event = event || window.event;
        mX = event.clientX;
        mY = event.clientY;
        dX = $divWrap.offset().left;
        dY = $divWrap.offset().top;
        isDown = true;//鼠标拖拽启动
      });
      $(document).mousemove(function(event) {
        var event = event || window.event;
        var x = event.clientX;//鼠标滑动时的X轴
        var y = event.clientY;//鼠标滑动时的Y轴
        if(isDown) {
          $divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div动态位置赋值
        }
      });
      $divMove.mouseup(function() {
        isDown = false;//鼠标拖拽结束
      });
      //绑定关闭事件
      var $closeBtn = $divWrap.find(".ui_widget_header_close");
      if($closeBtn && $closeBtn.length > 0){
        $closeBtn.bind("click",function(){
            $divWrap.remove();
            //执行回调
            if(callback && typeof(callback) === "function"){
                var args = [];
                callback.apply(this,args);//回调函数
            }
        });
      }
    });
  };
})(jQuery);

 /**
             * 设置dialog数据变化html
           参数:
            {
                "id":"xx",//dialog id
                "my-ui-widget-content-info":"xx"//变更html
            }
            */
var my_drag_div_operator_object = {
           //数据类型
        __getClass :function(object){
            return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
        },
        //css对象转style串
        _getStyleStr : function(item){
            var styleStr = '';
              if(this.__getClass(item) == 'Object'){
                  for ( var p in item ){ 
                     var objVal = item[p];
                     styleStr += p + ":" +objVal + ";";
                 }
             }
             return styleStr;
        },
        _initDragDivStyle:function(){
            //加载样式,暂时style中不支持 filter ,就往head中加style FIXEDME
            var defaults = $.drag_div.prototype.defaults;
            
            var drag_style = '<style type="text/css">';
            
            drag_style += '.'+defaults.classes.my_ui_widget_content+'{';
            drag_style += this._getStyleStr(defaults.styles.my_ui_widget_content);
            drag_style += '}';
            
            drag_style += '.'+defaults.classes.ui_widget_header+'{';
            drag_style += this._getStyleStr(defaults.styles.ui_widget_header);
            drag_style += '}';
            
            drag_style += '.'+defaults.classes.ui_widget_header_close+'{';
            drag_style += this._getStyleStr(defaults.styles.ui_widget_header_close);
            drag_style += '}';
            
            drag_style += '.'+defaults.classes.stable_div+'{';
            drag_style += this._getStyleStr(defaults.styles.stable_div);
            drag_style += '}';
            
            drag_style += '.'+defaults.classes.my_ui_widget_content_info+'{';
            drag_style += this._getStyleStr(defaults.styles.my_ui_widget_content_info);
            drag_style += '}';
            
            drag_style += '</style>';
            var headHtml = $("head").html();
            if(!(headHtml && headHtml.indexOf('.'+defaults.classes.my_ui_widget_content) > -1)){
                $("head").append(drag_style);
            }
        },
        /**
        获得drag DIV html代码,默认html根为body
        参数:
        {
            "id":"xx",//id
            "ui-widget-header-info": "xx",//dialog标题信息(可覆盖)
            "my-ui-widget-content-info":"xx",//dialog内容信息html(可覆盖,经常变动的html)
            "stable_div":""//dialog内容信息html((可覆盖,不经常变动的html)
        }
        调用:
        showDragDivHtml({"id":"xx","ui_widget_header": "合同基础信息导入进度详情","my_ui_widget_content_info":"处理中,请稍好。。。","stable_div":dialogProgressBar1Html});//展示拖拽
        */
        showDragDivHtml:function(options){
            var defaults = {"id":"","ui_widget_header": "title info is null!","my_ui_widget_content_info":"content is null!","stable_div":""};
            var options =  $.extend({},defaults, options);  
            if(options.id){
                    this._initDragDivStyle();//初始化样式
                    var dragDivHtml = '';
                dragDivHtml += '<div class="my_ui_widget_content" id="my_ui_widget_content'+options.id+'">';
                    dragDivHtml += '<span id="'+options.id+'" class="ui_widget_header">'+options.ui_widget_header+'</span><span class="ui_widget_header_close" title="\u5173\u95ed">x</span>';
                    dragDivHtml += '<div class="stable_div">'+options.stable_div+'</div>';//dialog稳定区域(暂时放进度条)
                    
                    dragDivHtml += '<div class="my_ui_widget_content_info">';
                    dragDivHtml += options.my_ui_widget_content_info;//展示内容
                    dragDivHtml += '</div>';
                    
                dragDivHtml += '</div>';
                $("body").prepend(dragDivHtml);
                $("#"+options.id).dragDiv(".my_ui_widget_content",options.callback);
            }
        },
            setDragDivContentInfo:function(options){
                var defaults = {"id":"","my_ui_widget_content_info":"请指定内容"};
                var options =  $.extend(defaults, options);  
                if(options.id){
                    var my_ui_widget_content_info_obj = $("#my_ui_widget_content"+options.id+" .my_ui_widget_content_info");
                    my_ui_widget_content_info_obj.html(options.my_ui_widget_content_info);
                       try{
                               var my_ui_widget_content_info_scroll_height = (my_ui_widget_content_info_obj.get(0)).scrollHeight;
                            my_ui_widget_content_info_obj.scrollTop(my_ui_widget_content_info_scroll_height);
                           }
                        catch(err) {
                               console.info("setDragDivContentInfo failed,because dragDivContent has removed."+err);
                           }
                }
            },
            hideDragDivContent:function(options){
                    var defaults = {"id":""};
                var options =  $.extend(defaults, options);  
                if(options.id){
                       $("#my_ui_widget_content"+options.id).remove();
                }
            }     

   //alert信息
            ,showDragAlert:function(options){
                var defaults = {"alert_info":"\u8f93\u5165\u63d0\u793a\u4fe1\u606f"};
                var options =  $.extend(defaults, options);
                var _rootEl=document.compatMode=="CSS1Compat"?document.documentElement:document.body;
                 var top = "30%";
                if(_rootEl){
                    top = _rootEl.scrollTop + _rootEl.clientHeight/2 - _rootEl.clientHeight/4 ;
                    top += "px";
                }
                var my_alert_html = '';
                my_alert_html += '<div id="';
                if(options.id){
                    my_alert_html += options.id;
                }
                my_alert_html += '" class="my_alert_info" style="border:1px solid #c5c5c5;background:#ffffff;padding:5px;width:210px;heigth:200px;position:absolute;left:50%;top:'+top+';z-index:9991">';
                my_alert_html += '    <span class="my_alert_info_head" style="display:inline-block;width:90%;text-align:left;padding:3px;border: 1px solid #dddddd;background: #e9e9e9;color: #333333;font-weight: bold;cursor: move;">';
                my_alert_html += '    \u7f51\u9875\u4fe1\u606f';
                my_alert_html += '    </span>';
                my_alert_html += '    <span class="ui_widget_header_close" title="\u5173\u95ed" style="display:inline-block;width:10%;text-align:center;border:1px solid #c5c5c5;background:#e9e9e9;color:#333333;font-weight:bold;cursor:pointer;padding:3px;">X</span>';
                my_alert_html += '    <div class="alert_info" style="margin-top:5px;padding:3px;">';
                my_alert_html += options.alert_info;
                my_alert_html += '    </div>';
                my_alert_html += '    <div class="ui_widget_header_close" style="margin-top:10px;border:1px solid #c5c5c5;padding:3px;cursor:pointer;margin-left:30%;text-align:center;width:50px;">\u786e\u5b9a</div>';
                my_alert_html += '</div>';
                $("body").prepend(my_alert_html);
                $(".my_alert_info_head").dragDiv(".my_alert_info",function(){
                });
            }
            ,hideDragAlert:function(options){
                $(".my_alert_info").remove();
            }
};

document.onkeydown = function(e) {
    //回车关闭my_alert_info
    if($(".my_alert_info").length > 0){
        var ev = (typeof event!= 'undefined') ? window.event : e;
         if(ev.keyCode == 13) {
             $(".my_alert_info").remove();
         }
    }
}

B:进度条:common_plug_progressbar.js

  /**
   * 仿jquery ui progressbar,div自动转进度条
   * 使用:引入本插件
   */
  ;(function($) {
      /**
       * 进度条构造
       * 
 调用:
 
  <div id="myprogressbarxxx" style="height:20px;width:100px;"></div>
  
 $( function() {
    $("#myprogressbarxxx").progressbar();//初始化进度
    $("#myprogressbarxxx").setProgressbarValue(2);//设置进度比0-100
     var per = $("#myprogressbarxxx").getProgressbarValue();//获得进度值
     alert(per);
  } );
        
  
       */
    var progressbar = function(this_progressbar,options) { 
        return this._init_progressbar(this_progressbar,options);
    };
    $.extend(progressbar.prototype, {
              defaults: {
                    classes: {
                        "ui_progressbar_content": "ui_progressbar_content",
                        "ui_progressbar_percent": "ui_progressbar_percent",
                        "ui_progressbar": "ui_progressbar",            
                        "ui_out_progressbar_percent": "ui_out_progressbar_percent"     
                    },
                    styles:{
                        ui_progressbar_content :{
                        "border": "1px solid #c5c5c5",
                        "background": "#ffffff",
                        "color": "#333333",
                        "display":"inline"
                        },
                        ui_progressbar :{
                            "position":"relative",
                            "height": "100%",
                            "cursor":"pointer",
                            "background": "#e9e9e9",
                            "overflow": "hidden"
                        },
                         ui_progressbar_percent:{
                            "position":"absolute",
                            "right":"3px"
                        },
                        ui_out_progressbar_percent:{
                        }
                    },
                    min: 0,
                    max: 100,
                    value: 0
               },
               //构造html
                _init_progressbar: function(this_progressbar,options) {
                    var options =  $.extend({},this.defaults, options);  
                    
                    var per_info = options.value+"%";
                     var this_ui_progressbar_content = $(this_progressbar).css(options.styles.ui_progressbar_content).attr("title",per_info);
                     var this_ui_progressbar_percent = $("<div>").addClass(options.classes.ui_progressbar_percent).css(options.styles.ui_progressbar_percent).html(per_info);
                     var this_ui_progressbar = $("<div>").addClass(options.classes.ui_progressbar).css(options.styles.ui_progressbar).css({"width":per_info});
                     
                     this_ui_progressbar_percent.appendTo(this_ui_progressbar);
                     this_ui_progressbar.appendTo(this_ui_progressbar_content);
                     
                     
                     return this_ui_progressbar_content;
                }
    });
     //包装jquery div进度对象
       $.fn.progressbar = $.prototype.progressbar = function(options) {
              return this.each(function() {
                  if (this.tagName. toLowerCase() == "div"){
                       new progressbar(this, options);//要的话存在data中
                  }
              });
       };
       
       /**
        * jquery 设置/获得进度值
        * 
        * 调用:
        *  $("#myprogressbarxxx").setProgressbarValue(2);//设置进度比0-100
        *   var per = $("#myprogressbarxxx").getProgressbarValue();//获得进度值
            alert(per);
        * 
        */
     $.fn.extend({
           //设置进度值
            'setProgressbarValue':function(value){
                     if(value > 100){
                        value = 100;
                     }
                    var per_info = value+"%";
                    $(this).attr("title",per_info);
                    $(this).find("."+progressbar.prototype.defaults.classes.ui_progressbar_percent).html(per_info);
                    $(this).find("."+progressbar.prototype.defaults.classes.ui_progressbar).css({"width":per_info});
                    $(this).next("."+progressbar.prototype.defaults.classes.ui_out_progressbar_percent).html(per_info);
            },
            //获得进度值
            'getProgressbarValue':function(value){
                 return $(this).attr("title");
            }
     });
     
       /**
        * 精确计算
        */
        var MY_MATH = {
               //除法
               _accDiv:function(arg1, arg2) {
                    var t1 = 0, t2 = 0, r1, r2;
                    try {
                        t1 = arg1.toString().split(".")[1].length;
                    }
                    catch (e) {
                    }
                    try {
                        t2 = arg2.toString().split(".")[1].length;
                    }
                    catch (e) {
                    }
                    with (Math) {
                        r1 = Number(arg1.toString().replace(".", ""));
                        r2 = Number(arg2.toString().replace(".", ""));
                        return (r1 / r2) * pow(10, t2 - t1);
                    }
                } 
       };
       
       /**
        * 1.获得进度条html 
        * 2.启动进度条
        * 
        * 调用:
        * var my_progressbar_operator  = new $.my_progressbar_operator ();
        * var html = my_progressbar_operator.getProgressBarInstance({});
        * my_progressbar_operator.startProgressBar({"id":"xx"});
        * 
        */
       $.my_progressbar_operator = function(options) {  };
        $.extend($.my_progressbar_operator.prototype, {
                //数据类型
                __getClass :function(object){
                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
                },
                //css对象转style串
                _getStyleStr : function(item){
                    var styleStr = '';
                      if(this.__getClass(item) == 'Object'){
                          for ( var p in item ){ 
                             var objVal = item[p];
                             styleStr += p + ":" +objVal + ";";
                         }
                     }
                     return styleStr;
                },
                /**
                 * 构建progressbar html
                 * 
                 * 参数说明:
                    {
                               id:"",//进度id(必须指定)
                               value: 0,//进度完成比例(可覆盖)
                               styles:{
                                     width:"200px",//进度条宽(可覆盖)
                                    height:"20px"//进图调高度(可覆盖)
                               }
                    };
                 */
                _construct_progressbar_html:function(outer_options){
                    var defaults = progressbar.prototype.defaults;
                    var $this_ui_progressbar_content = $.extend(defaults.styles.ui_progressbar_content, outer_options.styles);  
                    var ui_progressbar_content_style = this._getStyleStr($this_ui_progressbar_content);
                    var ui_progressbar_percent_style = this._getStyleStr(defaults.styles.ui_progressbar_percent);
                    var ui_progressbar_style = this._getStyleStr(defaults.styles.ui_progressbar);
                       
                       var pro_html = '<div class="'+defaults.classes.ui_progressbar_content+'" id= "'+outer_options.id+'" title="'+outer_options.value+'%" style="'+ui_progressbar_content_style+'">';
                                pro_html += '<div class="'+defaults.classes.ui_progressbar+'" style="'+ui_progressbar_style+'width:'+outer_options.value+'%">';
                                    pro_html += '<div class="'+defaults.classes.ui_progressbar_percent+'" style="'+ui_progressbar_percent_style+'">'+outer_options.value+'%</div>';
                                pro_html += '</div>';
                            pro_html += '</div>';
                            pro_html += '<span class="'+defaults.classes.ui_out_progressbar_percent+'">'+outer_options.value+'%</span>';
                             //console.info("pro_html is:"+pro_html);
                       return pro_html;
                },
            /**
             * 构造进度html
             * 
                参数说明:
                 defaults = {
                               id:"",//进度id(必须)
                               value: 0,//进度完成比例(可覆盖)
                               styles:{
                                     width:"200px",//进度条宽(可覆盖)
                                    height:"20px"//进图调高度(可覆盖)
                               }
                    };
                 * 
                 */
            getProgressBarInstance:function(options){
                var defaults = {
                           id:"",
                           value: 0,
                           styles:{
                                 width:"200px",
                                height:"20px"
                           }
                };
                var options =  $.extend({},defaults, options);  
                if(!options.id){
                       alert("init progress need args : id !");
                       return "";
                }
                return this._construct_progressbar_html(options);
            },
            /**
             * 开启进度
             * 
             * 参数说明:
                 defaults = {
                                 id:"",//进度id(必须)
                               start_value: 0,//起始值(可覆盖)
                               end_value:100,//完成值(可覆盖)
                               time_cost:10//耗时(s)(可覆盖)
                    };
             */
            startProgressBar: function (options){
                    var defaults = {
                               id:"",
                               start_value: 0,
                               end_value:100,
                               time_cost:10
                    };
                     var options =  $.extend({},defaults, options);  
                     if(!options.id){
                           alert("startProgressBar need args : id !");
                           return;
                    }
                     var distance_value = Number(options.end_value) - Number(options.start_value);
                     var increase_per = MY_MATH._accDiv(distance_value,Number(options.time_cost));//每秒的增量
                     
                     var progress_init = Number(options.start_value);//起始值
                     var interval_temp = setInterval(function(){
                        //
                               if(progress_init >= 100){
                                  if(interval_temp){
                                      window.clearInterval(interval_temp);
                                  }
                                  progress_init  = 100;
                              }else{
                                  progress_init = progress_init + increase_per;
                              }
                              progress_init = Math.round(progress_init*100)/100;
                           $("#"+options.id).setProgressbarValue(progress_init);//设置进度
                           //console.info("progress bar id:"+progress_init+" is:"+progress_init);
                         //
                     },1000);
                }
        });
       
})(jQuery);
 

C:锁屏:common_lock_screen.js

/**
 * 锁屏
 */
;(function($) {
       $.lock_screen = function(options) {};
       $.extend($.lock_screen.prototype, {
             defaults: {
                        classes: {
                            "ie_fixed_lock_screen": "ie_fixed_lock_screen",
                            "ie_fixed_lock_screen_center_position": "ie_fixed_lock_screen_center_position"
                        },
                        styles:{
                            ie_fixed_lock_screen :{
                                    'display':'none',
                                    'z-index':'9990',
                                    'width':'100%',
                                    'height':'100%',
                                    'filter': 'alpha(opacity=50)',  
                                    '-moz-opacity':'0.5',  
                                    'opacity': '0.5',
                                    'background':'#DDD',  
                                    '_position': 'absolute',  
                                    '_clear': 'both',   
                                    '_top':'expression(eval(document.compatMode &&   document.compatMode=="CSS1Compat") ?    documentElement.scrollTop    +(documentElement.clientHeight-this.clientHeight) - 8    : document.body.scrollTop    +(document.body.clientHeight-this.clientHeight) - 8)'
                                }
                                ,ie_fixed_lock_screen_center_position:{
                                    'position':'absolute',
                                    'top':'40%',
                                    'left':'30%',
                                    'scroll':'auto'
                                }
                        }
             }
       });
})(jQuery);

var my_lock_screen_operator_object = {
       //数据类型
        __getClass :function(object){
            return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
        },
        //css对象转style串
        _getStyleStr : function(item){
            var styleStr = '';
              if(this.__getClass(item) == 'Object'){
                  for ( var p in item ){ 
                     var objVal = item[p];
                     styleStr += p + ":" +objVal + ";";
                 }
             }
             return styleStr;
        },
       _init_lock_screen_style:function(){
            //加载样式,暂时style中不支持 filter ,就往head中加style FIXEDME
            var defaults = $.lock_screen.prototype.defaults;
            
            var drag_style = '<style type="text/css">';
            
            drag_style += '.'+defaults.classes.ie_fixed_lock_screen+'{';
            drag_style += this._getStyleStr(defaults.styles.ie_fixed_lock_screen);
            drag_style += '}';
            
            drag_style += '.'+defaults.classes.ie_fixed_lock_screen_center_position+'{';
            drag_style += this._getStyleStr(defaults.styles.ie_fixed_lock_screen_center_position);
            drag_style += '}';
            
            drag_style += '</style>';
            var headHtml = $("head").html();
            if(!(headHtml && headHtml.indexOf('.'+defaults.classes.my_ui_widget_content) > -1)){
                $("head").append(drag_style);
                //console.info("dary_style:"+drag_style);
            }
        },
     showLockScreen:function(){
         this._init_lock_screen_style();
        $("body").append('<div class="ie_fixed_lock_screen"><div class="ie_fixed_lock_screen_center_position">\u5904\u7406\u4e2d\uff0c\u8bf7\u7a0d\u540e\u3002\u3002\u3002</div></div>');
        $(".ie_fixed_lock_screen").show();
    },
    setLockScreenInfo:function(lockScreenInfo){
        if(lockScreenInfo){
            $(".ie_fixed_lock_screen_center_position").html(lockScreenInfo);
        }
    },
    hideLockScreen:function(){
        $(".ie_fixed_lock_screen").remove();
    }
}
D:回顶部:common_scroll.js

/**
 *回到顶部 auto scroll 页面引入生效
 */
;(function($) {
    /**
     * dialog配置
     */
   $.auto_scroll = function(options) {};
   $.extend($.auto_scroll.prototype, {
         defaults: {
                    classes: {
                        "scroll_fixed_": "scroll_fixed_",
                        "ie_scroll_fixed_": "ie_scroll_fixed_",
                        "x_scroll_goto_top": "x_scroll_goto_top"     
                    },
                    styles:{
                        scroll_fixed_ :{
                               'position':'fixed', 
                                'right':'8px',
                                'bottom':'8px',
                                'width':'30px', 
                                'height':'30px', 
                                'cursor':'pointer', 
                                'border-radius':'2px'
                        },
                        ie_scroll_fixed_ :{
                             '_position': 'absolute',
                             '_clear': 'both',
                             '_top':'expression(eval(document.compatMode &&   document.compatMode=="CSS1Compat") ?    documentElement.scrollTop    +(documentElement.clientHeight-this.clientHeight) - 8    : document.body.scrollTop    +(document.body.clientHeight-this.clientHeight) - 8)'
                        },
                        x_scroll_goto_top:{
                            'border': '1px solid #DDD',
                            'font':'25px',
                            'color':'#4e736e',
                            'line-height':'30px',
                            'font-color':'#DBF1EE',
                            'text-align':'center'
                        }
                    }
          }
   });
})(jQuery);
    
var my_scroll_operator_object = {
           //数据类型
        __getClass :function(object){
            return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
        },
        //css对象转style串
        _getStyleStr : function(item){
            var styleStr = '';
              if(this.__getClass(item) == 'Object'){
                  for ( var p in item ){ 
                     var objVal = item[p];
                     styleStr += p + ":" +objVal + ";";
                 }
             }
             return styleStr;
        },
        _initScrollStyle:function(){
            //加载样式,暂时style中不支持 filter ,就往head中加style FIXEDME
            var defaults = $.auto_scroll.prototype.defaults;
            
            var drag_style = '<style type="text/css">';
            
            drag_style += '.'+defaults.classes.scroll_fixed_+'{';
            drag_style += this._getStyleStr(defaults.styles.scroll_fixed_);
            drag_style += '}';
            
            drag_style += '.'+defaults.classes.ie_scroll_fixed_+'{';
            drag_style += this._getStyleStr(defaults.styles.ie_scroll_fixed_);
            drag_style += '}';
            
            drag_style += '.'+defaults.classes.x_scroll_goto_top+'{';
            drag_style += this._getStyleStr(defaults.styles.x_scroll_goto_top);
            drag_style += '}';
            
            drag_style += '</style>';
            var headHtml = $("head").html();
            if(!(headHtml && headHtml.indexOf('.'+defaults.classes.scroll_fixed_) > -1)){
                $("head").append(drag_style);
            }
        }
}
$(document).ready(function () {
    
    my_scroll_operator_object._initScrollStyle();
    
    $("body").append('<div class="scroll_fixed_ ie_scroll_fixed_ x_scroll_goto_top" title="\u56de\u9876\u90e8">\u2191</div>');
    $(window).scroll(function() {
            var sctop = $(document).scrollTop();
            if(sctop > 10){
                $(".x_scroll_goto_top").fadeIn("middle");
            }else{
                $(".x_scroll_goto_top").fadeOut("middle");
            }
        });    
        //回到頂部
        $('.x_scroll_goto_top').click(function(){
            $('html, body').animate({scrollTop:0}, 'middle');
        });
});
 

标签: jQuery
共有 人打赏支持
粉丝 19
博文 82
码字总数 55778
×
BeGit
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: