小弟刚学JS
在弄一个弹窗层的代码
在网上找到了一个挺好的效果..
就是有些复杂看不懂啊
求加注释。解释每个函数干什么用的
(越详细越好啊..)^_^代码在 弹出层
小弟分不多了..努力弄分中..
[[email protected]]结果发到这个邮箱里吧[/email]

解决方案 »

  1.   

    function $(id){...
    function $$(oParent, elem){...
    function $$$(oParent, sClass){...
    function Alert(){...
    Object.extend = function(destination, source){...
    Alert.prototype = {...
    主要是这几个
      

  2.   

    建议学一下JQuery,如果有难度,可以先在w3school学习一下基本js知识
      

  3.   


    /**
     * 当id是字符串的时候,根据ID获取指定的元素。否则直接返回id
     */
    function $(id){
    return typeof id === "string" ? document.getElementById(id) : id;
    }
    /**
     *根据父元素以及指定的节点名称获取节点集合(这里是元素标签的名称)
     *oParent:指定父元素,如果未指定,默认为document,oParent || document "或(||)":意思是前面如果不存在或者省略了,则取后面的document,
     *elem:节点的名称,比如div,span,p等
     * 返回元素集合
     * 比如:$$($('aaa'),'span');获取id为aaa下面的span元素集合
     */
    function $$(oParent, elem){
    return (oParent || document).getElementsByTagName(elem);
    }
    /**
     * 根据父元素以及指定的类名获取节点集合(注意这里是class的名称)
     * oParent 父元素,这里调用了上面的方法,其余解释同上
     */
    function $$$(oParent, sClass){
    var aElem = $$(oParent, '*');
    var aClass = [];
    var i = 0;
    for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
    return aClass;
    }
    /**
     * 这里其实就是调用这个Alert类的initialize方法,Alert是一个对象,javascript里面,函数也是对象
     * 在prototype里面有的,apply是借用某个方法的意思,
     * 也就是说直接执行某个方法,前面是指定当前上下文对象,这里就是本对象,arguments是参数
     */
    function Alert(){
    this.initialize.apply(this, arguments);
    }
    /**
     * 这里是对象的拷贝而已,将一个对象复制给另一个对象而已,跟jquery版本的extend类似,jquery复杂的多
     * 简单点说就是吧source对象里面的属性直接复制给destination对象
     * destination:是目标对象
     * source:源对象
     * 
     */
    Object.extend = function(destination, source){
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    };
    /**
     * 这个就是Alert对象了,里面有initialize方法,自己看吧。其余的应该不要解释了。
     */
    Alert.prototype = {
    //初始化
    initialize : function(obj, frame, onEnd){
    if($(obj)){
    var _this = this;
    this.obj = $(obj);
    this.frame = frame;
    this.oEve(onEnd);
    this.oTitle = this.onEnd.title;
    this.oContent = this.onEnd.content;
    this.iWidth = this.onEnd.width;
    this.iHeight = this.onEnd.height;
    this.iTop = this.onEnd.top;
    this.iLeft = this.onEnd.left;
    this.iFixed = this.onEnd.fixed;
    this.iClose = this.onEnd.close;
    this.obj.onclick = function(){_this.create(),_this.backg();};
    window.onresize = function(){_this.backg();};
    }
    },
    //创建对话框的一些基本元素
    create : function(){
    //csdn内容限制长度,内容我删除了,你自己对着看...
    },
    oEve: function(onEnd){
            this.onEnd = {};
            Object.extend(this.onEnd, onEnd || {});
        },
    //赋值内容,就是对话框里面的内容
    content : function(){
    this.conent = $$$(this.tit, 'alert_con')[0];
    this.conent == undefined ? this.con.innerHTML = this.oContent : this.conent.innerHTML = this.oContent;
    this.oButton = $$(this.tit, 'button');
    var i = 0;
    var _this = this;
    for(i=0;i<this.oButton.length;i++)this.oButton[i].onclick = function(){_this.em.onclick()};
    },
    //计算宽度
    width : function(){

    },
    //计算对话框高度
    height : function(){
    if(this.iHeight != ""){
    this.oFrame.style.height = parseInt(this.iHeight) +'px';
    this.oFrame.style.marginTop = -parseInt(this.iHeight) / 2 +'px';
    this.oCon.style.height = parseInt(this.iHeight) - 10 +'px';
    this.oAlert_con.style.height = parseInt(this.iHeight) - 40 +'px';
    }
    },
    //计算对话框距离顶部的距离,居中
    top : function(){
    if(this.iTop != "")this.oFrame.style.top = parseInt(this.iTop) +'px',this.oFrame.style.marginTop = 0;
    },
    //计算对话框距离左边的距离,居中
    left : function(){
    if(this.iLeft != "")this.oFrame.style.left = parseInt(this.iLeft) +'px',this.oFrame.style.marginLeft = 0;
    },
    backg : function(){
    this.oScrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    this.oScrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;
    this.oBackg.style.width = document.documentElement.clientWidth + (this.oScrollWidth - document.documentElement.clientWidth) +'px'
    this.oBackg.style.height = document.documentElement.clientHeight + (this.oScrollHeight - document.documentElement.clientHeight) +'px'
    },
    fixed : function(){
    if(this.iFixed == "fixed"){//固定对话框,需要考虑IE6的固定,因为不兼容fixed
    var _this = this;
    this.oFrame.style.position = 'fixed';
    this.oAlert_tit.style.cursor = 'move';
    this.oAlert_tit.onmousedown = function(e){
    var _thisE = this;
    this.oEvent = e || event;
    this.X = this.oEvent.clientX - _this.oFrame.offsetLeft;
    this.Y = this.oEvent.clientY - _this.oFrame.offsetTop;
    document.onmousemove = function(e){
    this.oEvent = e || event;
    this.L = this.oEvent.clientX - _thisE.X;
    this.T = this.oEvent.clientY - _thisE.Y;
    if(this.L < 0){
    this.L = 0;
    }else if(this.L > document.documentElement.clientWidth - _this.oFrame.offsetWidth){
    this.L = document.documentElement.clientWidth - _this.oFrame.offsetWidth
    }
    if(this.T < 0){
    this.T = 0;
    }else if(this.T > document.documentElement.clientHeight - _this.oFrame.offsetHeight){
    this.T = document.documentElement.clientHeight - _this.oFrame.offsetHeight;
    }
    _this.oFrame.style.left = this.L + 'px';
    _this.oFrame.style.top = this.T + 'px';
    _this.oFrame.style.margin = 0;
    return false;
    }
    document.onmouseup = function(){
    document.onmouseup = null;
    document.onmousemove = null;
    };
    return false;

    };
    if(this.oFrame){
    if(!-[1,] && !window.XMLHttpRequest){ //这里是修复IE6固定问题,因为fixed在IE6无法固定的
    document.documentElement.style.textOverflow = "ellipsis";
    this.oFrame.style.position = "absolute";
    this.oFrame.style.setExpression("top", "eval(documentElement.scrollTop + " + this.oFrame.offsetTop + ') + "px"');
    }
    }
    }
    },
    //对话框关闭操作
    close : function(){

    },
    //获取某个元素的css样式
    getStyle : function(obj, attr)
    {
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];
    },
    //拖动
    sMove : function(obj, json, onEnd){

    },
    //拖动
    dMove : function(obj, json, onEnd){

    }
    };
    //元素加载完成之后,new 一个Alert对象
    window.onload = function(){
    new Alert('but', 'box', {
    title : '提示内容',
    content : '<div class="size">确定不在关注新浪微博?</div><div class="but"><button class="button">确定</button><button class="button">取消</button></div>',
    width : '',
    height : '',
    top : '',
    left : '',
    fixed : '',
    close : 'close'
    });
    };
      

  4.   

    真心那些回复的人可以详细些,别给一些建议,如果别人真的能找到答案,也就不会来CSDN了,不要只顾着拿分。