有关JavaScript的插件的问题

对于JS的插件，在网上看过很多，还有jQuery的插件，但始终不太懂原理，希望有大神可以指教一下。
以下是我写的一个针对图片的有关放大，缩小，还原的一个功能，希望大神可以帮忙看看，然后将这个以JS面向对象的思想，改成插件的形式，万分感谢了，如果可能，希望可以加一波好友，我现在可以说是前端的小白一个，求哪位大神可以指点迷津。



var rw = 0;
var rh = 0;
var proportions01 = 1;
var proportions02 = 1;
var rects;
var ids;
var conLeft = -1;
var conTop = -1;

//后期通过键值对的形式来实现一个页面多张图片的效果，
//键：页面的ID    值：rect;

//获取$ID
function getIds(){
    if(typeof ids != "undefined"){
        return ids
    }else{
        return $("#content");
    }
}

//更改$ID
function setIds(idsFromHttl){
    if(typeof idsFromHttl != "undefined"){
        ids = idsFromHttl;
    }else{
        return;
    }
}

//从页面获取到的$ID
function getIdsFromHttl(idsFromHttl){
    setIds(idsFromHttl);
}


function drawPic(color,bigOrSmall,rect){
    //bigOrSmall为一个索引值，
    // 如果为0，则放大，如果为1，则缩小,
    // 如果为2，则重置
    getPicRect();
    if(typeof rect == "undefined"){
        rect = rects;
    }else{
        rects = rect;
    }
    if(bigOrSmall === 0){
        bigger(rect);
    }else if(bigOrSmall === 1){
        smaller(rect);
    }else if(bigOrSmall === 2){
        reset();
    }
    //清除之前的样式，并在#content下追加一个span标签
    getIds().children("span").remove();
    getIds().append("<span></span>");
    //滚动条定位到指定的位置
    var content = getIds().parent();
    if(conLeft == -1){
        conLeft = parseInt(getIds().offset().left)-parseInt(content.offset().left);
    }
    if(conTop == -1){
        conTop = parseInt(getIds().offset().top)-parseInt(content.offset().top);
    }
    proportions01 = parseFloat(getIds().children("img").width() /rw);
    proportions02 = parseFloat(getIds().children("img").height() / rh);
    //自动定位在所需的位置并给出一个半透明带颜色的框
    //if(getIds().offset().left < content.offset().left && (getIds().offset().left + getIds().width()) < (content.offset().left + content.width())){
    //    conLeft=0;
    //}
    getIds().children("span").css({
        "width": parseInt(rect.width)*proportions01 + "px",
        "height": parseInt(rect.height)*proportions02 + "px",
        "left":parseInt((parseInt(rect.left))*proportions01)+conLeft,
        "top":parseInt((parseInt(rect.top))*proportions02)+conTop,
        "background-color": color,
        "position":"absolute",
        "opacity":0.6
    });
    if((parseInt(getIds().children("img").offset().left) - parseInt(getIds().offset().left)) >= 3){
        getIds().children("span").css({
            "left":parseInt((parseInt(rect.left))*proportions01)+(parseInt(getIds().children("img").offset().left)-parseInt(getIds().offset().left))
        });
    }
    content.scrollTop(parseInt((parseInt(rect.top))*proportions02)+conTop-60);
    content.scrollLeft(parseInt((parseInt(rect.left))*proportions01)+conLeft);
    getIds().parent().parent().next().children(".mini-fit").scrollTop(0);
    getIds().parent().parent().next().children(".mini-fit").scrollLeft(0);
    //给顶部在按钮进行定位，并显示在最外层
    $("#imgChange").css({
        "position":"fixed",
        "z-index":10
    });
}

//获取图片的原始大小
function getPicRect(){
    var content = getIds()[0];
    var myimage = content.getElementsByTagName("img");
    if (typeof myimage[0].naturalWidth == "undefined") {
        //IE 6/7/8
        var i = new Image();
        i.src = myimage[0].src;
        rw = i.width;
        rh = i.height;
    }
    else {
        // HTML5 browsers
        rw = myimage[0].naturalWidth;
        rh = myimage[0].naturalHeight;
    }
}

//放大的效果
function bigger(rect){
    //需要获取图片原始大小
    getPicRect();
    var height = getIds().children("img").height();
    var width = getIds().children("img").width();
    //最大宽度为原始宽度的2.1倍，再点击则无效
    if(width * 1.06 <= rw * 2.1){
        //每次放大1.06倍(放大的值，后期也可以改，或者干脆带进一个参数也可以)
        getIds().children("img").height(height * 1.06 );
        getIds().children("img").width(width *1.06);
    }
}

//缩小的效果
function smaller(rect){
    //需要获取图片原始大小
    getPicRect();
    var height = getIds().children("img").height();
    var width = getIds().children("img").width();
    //最小只能缩小到原始宽度的0.36倍，再点击则无效
    if(width * 0.94 >= rw * 0.36){
        //每次缩小0.94倍(缩小的值，后期也可以改，或者干脆带进一个参数也可以)
        getIds().children("img").height(height * 0.94);
        getIds().children("img").width(width * 0.94);
    }
}

//按照图片的原始尺寸开始还原
function reset(){
    getPicRect();
    getIds().children("span").removeClass();
    getIds().children("img").height(rh);
    getIds().children("img").width(rw);
    proportions01 = 1;
    proportions02 = 1;
}

楼主你说的面向对象
应该是下面这样的：

init.on=function(a,b,c){
    var person = new Object();
    person.name=a;
    person.age=b;
    person.point=c;
    person.getname=function(){
        return this.name;
    }
    return person;
}

var xxx=init.on(a,b,c);
xxx.getname();

插件简而言之，就是已经写好的一堆函数，如果你需要用他的功能，你就要导入，
楼主自己写的js完全可以看成一个插件，
如果别人需要用你的功能时，就需要导入你的js喽！

var rw = 0;
var rh = 0;
var proportions01 = 1;
var proportions02 = 1;
var rects;
var ids;
var conLeft = -1;
var conTop = -1;

//后期通过键值对的形式来实现一个页面多张图片的效果，
//键：页面的ID 值：rect;

//获取$ID
function getIds(){
if(typeof ids != "undefined"){
return ids
}else{
return $("#content");
}
}

//更改$ID
function setIds(idsFromHttl){
if(typeof idsFromHttl != "undefined"){
ids = idsFromHttl;
}else{
return;
}
}

//从页面获取到的$ID
function getIdsFromHttl(idsFromHttl){
setIds(idsFromHttl);
}

/**
*

  • 通过一个包含有四个参数的对象所需要调用的函数
  • @param color 颜色
  • @param bigOrSmall 放大或者缩小
  • @param rect 包含有四个参数的对象 */ function drawPic(color,bigOrSmall,rect){ //bigOrSmall为一个索引值， // 如果为0，则放大，如果为1，则缩小, // 如果为2，则重置 getPicRect(); if(typeof rect == "undefined"){ rect = rects; }else{ rects = rect; } if(bigOrSmall === 0){ bigger(rect); }else if(bigOrSmall === 1){ smaller(rect); }else if(bigOrSmall === 2){ reset(); } //清除之前的样式，并在#content下追加一个span标签 getIds().children("span").remove(); getIds().append(""); //滚动条定位到指定的位置 var content = getIds().parent(); if(conLeft == -1){ conLeft = parseInt(getIds().offset().left)-parseInt(content.offset().left); } if(conTop == -1){ conTop = parseInt(getIds().offset().top)-parseInt(content.offset().top); } proportions01 = parseFloat(getIds().children("img").width() /rw); proportions02 = parseFloat(getIds().children("img").height() / rh); //自动定位在所需的位置并给出一个半透明带颜色的框 //if(getIds().offset().left < content.offset().left && (getIds().offset().left + getIds().width()) < (content.offset().left + content.width())){ // conLeft=0; //} getIds().children("span").css({ "width": parseInt(rect.width)*proportions01 + "px", "height": parseInt(rect.height)*proportions02 + "px", "left":parseInt((parseInt(rect.left))*proportions01)+conLeft, "top":parseInt((parseInt(rect.top))*proportions02)+conTop, "background-color": color, "position":"absolute", "opacity":0.6 }); if((parseInt(getIds().children("img").offset().left) - parseInt(getIds().offset().left)) >= 3){ getIds().children("span").css({ "left":parseInt((parseInt(rect.left))*proportions01)+(parseInt(getIds().children("img").offset().left)-parseInt(getIds().offset().left)) }); } content.scrollTop(parseInt((parseInt(rect.top))*proportions02)+conTop-60); content.scrollLeft(parseInt((parseInt(rect.left))*proportions01)+conLeft); getIds().parent().parent().next().children(".mini-fit").scrollTop(0); getIds().parent().parent().next().children(".mini-fit").scrollLeft(0); //给顶部在按钮进行定位，并显示在最外层 $("#imgChange").css({ "position":"fixed", "z-index":10 }); }

//动态添加的三个按钮
function addbuttons(colors,strOrNot,idsFromHttl){
var adds_1 = '

' +
'
';
var adds_2 = '';
if(typeof rects == "undefined"){
rects={
left:0,
top:0,
width:0,
height:0
}
}
ids = idsFromHttl;
if(strOrNot){
adds_2 = '放大 ' +
'缩小 ' +
'还原 ' +
'
';
}else{
adds_2 = '放大 ' +
'缩小 ' +
'还原 ' +
' ';
}
//按钮默认添加在将当前图片包含的DIV的前面的一个同辈节点上，后期可带参进行添加
idsFromHttl.before(adds_1+adds_2);
}

//获取图片的原始大小
function getPicRect(){
var content = getIds()[0];
var myimage = content.getElementsByTagName("img");
if (typeof myimage[0].naturalWidth == "undefined") {
//IE 6/7/8
var i = new Image();
i.src = myimage[0].src;
rw = i.width;
rh = i.height;
}
else {
// HTML5 browsers
rw = myimage[0].naturalWidth;
rh = myimage[0].naturalHeight;
}
}

//放大的效果
function bigger(rect){
//需要获取图片原始大小
getPicRect();
var height = getIds().children("img").height();
var width = getIds().children("img").width();
//最大宽度为原始宽度的2.1倍，再点击则无效
if(width * 1.06 <= rw * 2.1){
//每次放大1.06倍(放大的值，后期也可以改，或者干脆带进一个参数也可以)
getIds().children("img").height(height * 1.06 );
getIds().children("img").width(width *1.06);
}
}

//缩小的效果
function smaller(rect){
//需要获取图片原始大小
getPicRect();
var height = getIds().children("img").height();
var width = getIds().children("img").width();
//最小只能缩小到原始宽度的0.36倍，再点击则无效
if(width * 0.94 >= rw * 0.36){
//每次缩小0.94倍(缩小的值，后期也可以改，或者干脆带进一个参数也可以)
getIds().children("img").height(height * 0.94);
getIds().children("img").width(width * 0.94);
}
}

//按照图片的原始尺寸开始还原
function reset(){
getPicRect();
getIds().children("span").removeClass();
getIds().children("img").height(rh);
getIds().children("img").width(rw);
proportions01 = 1;
proportions02 = 1;
}

不知道为什么，代码第一次发上来，然后乱了，因为不知道有编辑，所以又重新发了一次，抱歉了，二楼的我的那个代码不用管就好了，对了还有一个动态添加三个按钮的功能，不过不知道为什么，在这里面显示不了，我就不写了，其实上面的这些搞定了，最后那个添加按钮的功能方法套就是了。

要做成类的格式，然后传入参数，做好变量隔离保护就行了，大概就下面这样，只需要传入3个参数就行了，然后套个函数保护变量就可以生成多个实例了

     function MySlider(ids, content, imgChange) {
        var rw = 0;
        var rh = 0;
        var proportions01 = 1;
        var proportions02 = 1;
        var rects;
        //var ids;
        var conLeft = -1;
        var conTop = -1;

        //后期通过键值对的形式来实现一个页面多张图片的效果，
        //键：页面的ID    值：rect;

        //获取$ID
        function getIds() {
            if (typeof ids != "undefined") {
                return ids
            } else {
                return $("#"+content);/////////////
            }
        }

        //更改$ID
        function setIds(idsFromHttl) {
            if (typeof idsFromHttl != "undefined") {
                ids = idsFromHttl;
            } else {
                return;
            }
        }

        //从页面获取到的$ID
        function getIdsFromHttl(idsFromHttl) {
            setIds(idsFromHttl);
        }


        function drawPic(color, bigOrSmall, rect) {
            //bigOrSmall为一个索引值，
            // 如果为0，则放大，如果为1，则缩小,
            // 如果为2，则重置
            getPicRect();
            if (typeof rect == "undefined") {
                rect = rects;
            } else {
                rects = rect;
            }
            if (bigOrSmall === 0) {
                bigger(rect);
            } else if (bigOrSmall === 1) {
                smaller(rect);
            } else if (bigOrSmall === 2) {
                reset();
            }
            //清除之前的样式，并在#content下追加一个span标签
            getIds().children("span").remove();
            getIds().append("<span></span>");
            //滚动条定位到指定的位置
            var content = getIds().parent();
            if (conLeft == -1) {
                conLeft = parseInt(getIds().offset().left) - parseInt(content.offset().left);
            }
            if (conTop == -1) {
                conTop = parseInt(getIds().offset().top) - parseInt(content.offset().top);
            }
            proportions01 = parseFloat(getIds().children("img").width() / rw);
            proportions02 = parseFloat(getIds().children("img").height() / rh);
            //自动定位在所需的位置并给出一个半透明带颜色的框
            //if(getIds().offset().left < content.offset().left && (getIds().offset().left + getIds().width()) < (content.offset().left + content.width())){
            //    conLeft=0;
            //}
            getIds().children("span").css({
                "width": parseInt(rect.width) * proportions01 + "px",
                "height": parseInt(rect.height) * proportions02 + "px",
                "left": parseInt((parseInt(rect.left)) * proportions01) + conLeft,
                "top": parseInt((parseInt(rect.top)) * proportions02) + conTop,
                "background-color": color,
                "position": "absolute",
                "opacity": 0.6
            });
            if ((parseInt(getIds().children("img").offset().left) - parseInt(getIds().offset().left)) >= 3) {
                getIds().children("span").css({
                    "left": parseInt((parseInt(rect.left)) * proportions01) + (parseInt(getIds().children("img").offset().left) - parseInt(getIds().offset().left))
                });
            }
            content.scrollTop(parseInt((parseInt(rect.top)) * proportions02) + conTop - 60);
            content.scrollLeft(parseInt((parseInt(rect.left)) * proportions01) + conLeft);
            getIds().parent().parent().next().children(".mini-fit").scrollTop(0);
            getIds().parent().parent().next().children(".mini-fit").scrollLeft(0);
            //给顶部在按钮进行定位，并显示在最外层
            $("#"+imgChange).css({////////////
                "position": "fixed",
                "z-index": 10
            });
        }

        //获取图片的原始大小
        function getPicRect() {
            var content = getIds()[0];
            var myimage = content.getElementsByTagName("img");
            if (typeof myimage[0].naturalWidth == "undefined") {
                //IE 6/7/8
                var i = new Image();
                i.src = myimage[0].src;
                rw = i.width;
                rh = i.height;
            }
            else {
                // HTML5 browsers
                rw = myimage[0].naturalWidth;
                rh = myimage[0].naturalHeight;
            }
        }

        //放大的效果
        function bigger(rect) {
            //需要获取图片原始大小
            getPicRect();
            var height = getIds().children("img").height();
            var width = getIds().children("img").width();
            //最大宽度为原始宽度的2.1倍，再点击则无效
            if (width * 1.06 <= rw * 2.1) {
                //每次放大1.06倍(放大的值，后期也可以改，或者干脆带进一个参数也可以)
                getIds().children("img").height(height * 1.06);
                getIds().children("img").width(width * 1.06);
            }
        }

        //缩小的效果
        function smaller(rect) {
            //需要获取图片原始大小
            getPicRect();
            var height = getIds().children("img").height();
            var width = getIds().children("img").width();
            //最小只能缩小到原始宽度的0.36倍，再点击则无效
            if (width * 0.94 >= rw * 0.36) {
                //每次缩小0.94倍(缩小的值，后期也可以改，或者干脆带进一个参数也可以)
                getIds().children("img").height(height * 0.94);
                getIds().children("img").width(width * 0.94);
            }
        }

        //按照图片的原始尺寸开始还原
        function reset() {
            getPicRect();
            getIds().children("span").removeClass();
            getIds().children("img").height(rh);
            getIds().children("img").width(rw);
            proportions01 = 1;
            proportions02 = 1;
        }
    }

    new MySlider(null, 'content', 'imgChange');//

楼主写的插件只是function的初步的使用，面向对象首先利用的就是JavaScript的闭包特性

以下是我在网上看到的做成插件的一种，然而并不是太了解原理之类的。。。

function aaa(){
some code
}
function bbb(){
some code
}
function ccc(){
some code
}
var xxx = {
方法名1:function(参数列表){
some code
}
方法名2:function(参数列表){
some code
}
方法名3:function(参数列表){
some code
}
}

(function($){
$.fn.方法名 = function(options){};

})(jQuery);

(function($){ //这个是立刻执行函数
$.fn.方法名 = function(options){ //$.fn 对jQuery添加属性“方法名”，也就是可以用jQuery对象调用该方法了
var default = {};//默认参数
var opt = $.方法名.extend({},default,options);//参数扩展
};

})(jQuery);
具体的话你可以看这个http://www.cnblogs.com/silverLee/archive/2009/12/22/1629925.html

你可以参考一下这篇文章：http://www.cnblogs.com/silverLee/archive/2009/12/22/1629925.html