对于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;
}
前端样式相关问题求指教

忽而遗忘

3个回复
