Question

这里的总菜鸟，我假设有一种方法可以更快/更小地写这个。有什么建议吗？

对不起，如果它没有真正降低＆amp;在我正在使用的框架之外，但如果有帮助，这里有一个实例。

直播示例：http://linkthegeek.com/public/code/bookmarker/index.html （仅适用于webkit，我只在chrome中测试过）

BannerOne    = 1;
BannerTwo    = 2;
BannerThree  = 3;
BannerFour   = 4;
BannerFive   = 5;

PSD['bannerdrop-'+ BannerOne].y= -200;
PSD['bannerdrop-'+ BannerTwo].y= -200;
PSD['bannerdrop-'+ BannerThree].y= -200;
PSD['bannerdrop-'+ BannerFour].y= -200;
PSD['bannerdrop-'+ BannerFive].y= -200;

PSD['bannerbtn-'+ BannerOne].on("click", function(){Bookmark(BannerOne)         });
PSD['bannerdrop-'+ BannerOne].on("click", function(){Bookmark(BannerOne)        });
PSD['bannerbtn-'+ BannerTwo].on("click", function(){Bookmark(BannerTwo)         });
PSD['bannerdrop-'+ BannerTwo].on("click", function(){Bookmark(BannerTwo)        });
PSD['bannerbtn-'+ BannerThree].on("click", function(){Bookmark(BannerThree)     });
PSD['bannerdrop-'+ BannerThree].on("click", function(){Bookmark(BannerThree)    });
PSD['bannerbtn-'+ BannerFour].on("click", function(){Bookmark(BannerFour)       });
PSD['bannerdrop-'+ BannerFour].on("click", function(){Bookmark(BannerFour)      });
PSD['bannerbtn-'+ BannerFive].on("click", function(){Bookmark(BannerFive)       });
PSD['bannerdrop-'+ BannerFive].on("click", function(){Bookmark(BannerFive)      });

function Bookmark (viewnum) {
item = PSD['item-'+ viewnum ]
    bannerbtn = PSD['bannerbtn-'+ viewnum ]
    bannerdrop = PSD['bannerdrop-'+ viewnum ]

    var down;
    var away;
    var small;

    if (bannerbtn.opacity == 1) { 
        away = 0;
        small = .03;
        down = -13;
    };

    if (bannerbtn.opacity == 0) { 
        away = 1;
        small = 1;
        down = -200;
    };

    //animations
    bannerdrop.animate({
        properties:{y:down},
        curve:"spring(100,15,200)"
    });

    bannerbtn.animate({
        properties:{opacity:away, scale:small},
        curve:"linear",
        time:100
    });



};

Answer 1

在这里不太了解你的应用程序，但这里可能会让你朝着正确的方向前进。

这绝对是无法正常运行，因为我没有很多背景信息并做出了假设：

var BannerCount = 5;

var PSD = [];

for (i = 0; i < count; i++) {
    PSD[i] = {};
    PSD[i].btn = document.getElementById('bannerbtn-' + i);

    PSD[i].btn.on("click", function (eevent) {
        Bookmark(eevent.srcElement);
    });

    PSD[i].y = -200;
    PSD[i].on("click", function (eevent) {
        Bookmark(eevent.srcElement);
    });

    PSD[i].drop = document.getElementById('bannerdrop-' + i).addEventListener("click",

    function (eevent) {
        Bookmark(eevent.srcElement);
    });
}

function Bookmark(itemPSD) {

    var down;
    var away;
    var small;

    if (itemPSD.btn.style.opacity == 1) {
        away = 0;
        small = 0.03;
        down = -13;
    } else if (itemPSD.btn.style.opacity === 0) {
        away = 1;
        small = 1;
        down = -200;
    }

    //animations
    itemPSD.drop.animate({
        properties: {
            y: down
        },
        curve: "spring(100,15,200)"
    });

    itemPSD.btn.animate({
        properties: {
            opacity: away,
            scale: small
        },
        curve: "linear",
        time: 100
    });
}

Answer 2

我们可能需要一个对象bannerdrop将保存您拥有的任何属性。所以我们要做的是声明这个对象的数组，如：

function bannerdrop(y){
       this.y = y;
       this.on('click', function(){bookmark(this);});
    }
     function bookmark(obj){
        var down;
        var away;
        var small;

        //animations
        obj.animate({
            properties:{y:down},
            curve:"spring(100,15,200)"
        });
    }
    var bannerArray = new Array(new bannerdrop(-200), new bannerdrop(-200), new bannerdrop(-200));

在javascript中设置此功能的最有效方法是什么？

2 个答案: