2010/03/26

ๆ–‡็ซ ๅ…งๅฎนๅœ–็‰‡ๅคงๅฐๆŽงๅˆถๅŠŸ่ƒฝ

ๅพˆๅคšไบบPOๅœ–ๆ™‚ๆœƒๅฟ˜่จ˜resize，ๅฐŽ่‡ดๆŸไบ›Blogๆˆ–่€…ๆ–ฐ่ž็™ผๅธƒๅพŒๅœ–็‰‡ๆ’้–‹ไบ†่ฉฒๅ…งๅฎน็š„็ฏ„ๅœ
ๆ‰€ไปฅๆˆ‘ๅฏซไบ†ไธ€้šปjQueryไพ†้˜ฒๅ ต้€™ไปถไบ‹ๆƒ…。

็ฏ„ไพ‹HTML

Img Resize





็…ง็‰‡1
ๅœ–็‰‡1：็„ก้€ฃ็ต，ๆœ‰่ถ…้Ž，500x333。

็…ง็‰‡2
ๅœ–็‰‡2：็„ก้€ฃ็ต，็„ก่ถ…้Ž，300x450。

็…ง็‰‡3
ๅœ–็‰‡3：ๆœ‰้€ฃ็ต，ๆœ‰่ถ…้Ž，500x333。

jQuery code
/**
* ๆŒ‡ๅฎšๅ€ๅŸŸๅœ–็‰‡็ธฎๅœ–ๅŠŸ่ƒฝ
* ๅปบ็ซ‹ๆ—ฅๆœŸ：2010/03/26
* ไฝœ่€…：David
* Email chan15tw@gmail.com
*/
(function() {
    // $w - ้™ๅˆถๅฏฌๅบฆ
    $.fn.dramaImgResize = function($w) {
        return this.each(function() {
            // ๆ‰พๅ‡บๆŒ‡ๅฎšๅ€ๅŸŸๆ‰€ๆœ‰็‚บๅœ–็‰‡็š„dom
            $(this)
                .find('img')
                .each(function() {
                    // ่‹ฅ่ถ…้Ž่ฆๅฎšๅฏฌๅบฆ，ๅ‰‡ๅฐ‡ๅŽŸๅง‹ๅฏฌๅบฆไปฅๅŠ็ธฎๅœ–ๅฏฌๅบฆ็ด€้Œ„ๆ–ผdataไธญ
                    if ($(this).width() > $w) {
                        // ๆ–ฐ้ซ˜ๅบฆ
                        $newH = Math.ceil($(this).height() / $(this).width() * $w);
                        
                        // ่ณฆไบˆ่ณ‡่จŠ：$oW = ๅŽŸๅง‹ๅฏฌๅบฆ，$oH = ๅŽŸๅง‹้ซ˜ๅบฆ，$nW = ๆ–ฐๅฏฌๅบฆ，$nH = ๆ–ฐ้ซ˜ๅบฆ，$click = ๆ˜ฏๅฆ้ปžๆ“Š
                        $(this)
                            .data('imgInfo', {$oW: $(this).width(), $oH: $(this).height(), $nW: $w, $nH: $newH})
                            .data('click', false)
                            .width($w)
                            .height($newH);                       
                        
                        // ่‹ฅๅŽŸๆœฌๅฐฑๆœ‰่ถ…้€ฃ็ต，ๅ‰‡ไธๅŠ ไธŠๅœ–็‰‡ๆ”น่ฎŠๅคงๅฐๅŠŸ่ƒฝ
                        if ($(this).parent()[0].tagName.toLowerCase() != 'a') {
                            $(this)
                                .css('cursor', 'pointer')
                                .click(function() {
                                    if (!$(this).data('click')) {
                                        $(this).animate({width: $(this).data('imgInfo').$oW, height: $(this).data('imgInfo').$oH}, 'fast', function() {
                                            $(this).data('click', true);
                                        });
                                    } else {
                                        $(this).animate({width: $(this).data('imgInfo').$nW, height: $(this).data('imgInfo').$nH}, 'fast', function() {
                                            $(this).data('click', false);
                                        });
                                    }
                                    return false;
                                });
                        }
                    }
                });
        });
    }
})(jQuery);

็ฏ„ไพ‹็ถฒๅ€：http://www.drama.com.tw/jquery/imgResize.html
JSไธ‹่ผ‰：http://www.drama.com.tw/jquery/js/jquery.dramaImgResize.js
ๅผต่ฒผ่€…： ๆ–ผ ๆฒ’ๆœ‰็•™่จ€:
ๆจ™็ฑค：

2010/03/06

ๆทฑๅ‘้Š

้›ฃๅพ—ๅ‡ๆ—ฅๆ˜ฏๅฅฝๅคฉๆฐฃ，ไปŠๅคฉๅฐฑๅ‡บ็™ผๅŽปๆทฑๅ‘็Žฉๅง


ๆœฌไพ†่ฆๆ—ฉไธŠๅฐฑๅŽป็š„，ๅฏๆ˜ฏๅคช้™ฝๅคชๅคงไบ†，ๆ‰€ไปฅๆ”น่ฎŠ่กŒ็จ‹，ไธญๅˆๅ…ˆๅŽปๅƒๅ’–ๅ“ฉ，ไธ‹ๅˆ็œ‹ๅฝฑ็‰‡，ๅ‚ๆ™šๆ‰ๅ‡บ็™ผ = =




ๅผต่ฒผ่€…： ๆ–ผ ๆฒ’ๆœ‰็•™่จ€:
ๆจ™็ฑค：
่จ‚้–ฑ： ๆ–‡็ซ  (Atom)