zoukankan      html  css  js  c++  java
  • jquery 返回顶端组件

    自己写了一个基于jquery的返回页面顶端的组件。 

    (function($) { 
    var g; 
    $.backtop = function(options) { 
    extend($.backtop.config, options); 
    this.config = $.backtop.config; 
    this.init(); 
    g = this; 
    }; 
    $.backtop.config = { 
    title : null,// 返回顶端文字说明 
    df_color : "#77AA55"// 组件默认颜色 
    }; 
    $.backtop.prototype = { 
    config : null, 
    backtop : null,// 当前创建返回顶端对象 
    init : function() { 
    this._scrool(); 
    }, 
    _scrool : function() { 
    window.onscroll = function() { 
    g._create_ob($(window).scrollTop()); 
    }; 
    }, 
    _create_ob : function(top) { 
    if(top==0){ 
    $("#back_top").remove(); 
    return; 
    } 
    $("#back_top").remove(); 
    this.backtop = $("<div class='mouseover'><img src='ui/main/gotop.gif'></img></div>"); 
    $(this.backtop).bind("click",function(){ 
    g._moveTo(); 
    }); 
    $(this.backtop).bind("mouseover",function(){ 
    $(g.backtop).removeClass(); 
    $(g.backtop).addClass("mouse"); 
    }); 
    $(this.backtop).bind("mouseout",function(){ 
    $(g.backtop).removeClass(); 
    $(g.backtop).addClass("mouseover"); 
    }); 
    $(this.backtop).attr("id","back_top"); 
    /*$(this.backtop).css("backgroundColor", this.config.df_color);*/ 
    $(this.backtop).css("zIndex", 1000); 
    $(this.backtop).css("position", "absolute"); 
    $(this.backtop).css("cursor","pointer"); 
    $(this.backtop).width(30); 
    $(this.backtop).height(30); 
    $(this.backtop).css("left",$("body").attr("clientWidth")-50); 
    $(this.backtop).css("top", top+300); 
    $("body").append(this.backtop); 
    },// 创建返回顶端jquery对象 
    _moveTo:function(){ 
    $("#back_top").remove(); 
    window.scroll(0,0); 
    } 
    }; 
    })(jQuery); 
    var extend = function($cf, options) { 
    for ( var a in options) { 
    $cf[a] = options[a]; 
    } 
    }; 
  • 相关阅读:
    bzoj1009
    bzoj1576 3694
    bzoj3143
    bzoj1391
    bzoj2729
    bzoj2653
    bzoj3261
    bzoj2326
    人件
    优秀的产品
  • 原文地址:https://www.cnblogs.com/ranzige/p/4054614.html
Copyright © 2011-2022 走看看