jquery中的圖像大小

我有一個應用程序時，分別對「焦點」和「模糊」事件的圖像放大/縮小。我已經使用這個功能對於jquery中的圖像大小

<script> 

$(document).ready(function() { 


    var timer; 
    var w="img.width"; 
    var h="img.height"; 
     $('button:has(img)').focus(function() { 
     var $image = $(this).find('img'); 

     timer = setTimeout(function() { 

       $image.animate({ 
        'width': "+=15px", 
        'height': "+=15px" 
       }, 500); 
       }, 
       1000); 

     }); 

     $('button:has(img)').blur(function() { 

     if (timer !== null) clearTimeout(timer); 
     $(this).find('img').animate({ 
       'width': "-=15px", 
       'height': "-=15px" 
      }, 0); 
     }); 

</script>

現在我的問題是存在的，我可以讀出的圖像大小，並添加15px的圖像的寬度和高度，並通過這些值，而不是這樣做的任何其他方式：

「width」：「+ = 15px」和height'：「+ = 15px將這個值傳遞給focus（）和'width'：」 - = 15px「和height'：」 - = 15px blur（）。

我試着做下面的變化，但沒有工作

變種W = 「image.width」; var h =「image.height」; var updated_w = w + 10; var updated_h = h + 10;

將w，h傳遞給blur（）和updated_w，將updated_h傳遞給focus（）。這是行不通的。

來源

2011-01-24 rashmi

我猜模糊部分不起作用？或者有什麼問題？ – helle 2011-01-24 09:36:56

你總是可以問``（'img'）。height（）;`或者那不是你所指的？ – Marnix 2011-01-24 09:43:12

是模糊部分將無法工作 – rashmi 2011-01-24 09:43:21

因此，作爲我從意見中瞭解到。你的電話過於頻繁，你需要保留一些原創。首先初始化的影像，然後：

$(document.ready(function() 
{ 
    $('button img').each(function() 
    { 
     // save the data inside the element with jQuery 
     $.data(this, 'orgH', $(this).height()); 
     $.data(this, 'orgW', $(this).width()); 
    }); 

    // i omitted the timeout, but do as you wish 
    // just an example of $.data 
    $('button:has(img)').focus(function() 
    { 
     $('img',this).each(function() 
     { 
      $(this).animate({ 
      width: $.data(this,'orgW') + 15 + 'px' // where THIS is the image element again 
      }); 
     }); 
    }); 
});

HINTS

的setTimeout的事件又有this的窗口。所以我們需要做一些重點工作，因爲上面的代碼工作正常，沒有超時。

新的更新

我把同樣的功能的模糊。當你這樣做時，你的代碼工作正常，但你真的必須檢查你的keyInput代碼，因爲它有點bug。螢火蟲甚至會給出錯誤，因爲你還沒有TAB的情況。

var timerFocus; 
var timerBlur; 
$('button:has(img)').focus(function() 
{ 
    if(timerBlur !== null) clearTimeout(timerBlur); 
    timerFocus = setTimeout(function(el) 
    { 
     $('img',el).each(function() 
     { 
      $(this).animate({ 
      width: $.data(this,'orgW') + 15 + 'px', // where THIS is the image element again 
      height : $.data(this,'orgH') + 15 + 'px' 
      }); 
     }); 
    },500,this); // THIS is the button element 
}); 

$('button:has(img)').blur(function() 
{ 
    if (timerFocus !== null) clearTimeout(timerFocus); 
    timerBlur = setTimeout(function(el) 
    { 
     $('img',el).each(function() 
     { 
      $(this).animate({ 
       width: $.data(this,'orgW')-15+'px', // WATCH THIS COMMA! 
       height: $.data(this,'orgH')-15+'px' 
      }); 
     }); 
    },500,this); 
});

來源

2011-01-24 10:24:08 Marnix

你可以試試這個，但是你會放棄縮放效果。

$('button:has(img)').blur(function() { 

     if (timer !== null) clearTimeout(timer); 
     var image = $(this).find('img'); 
     var new_width = image.width() - 15; 
     var new_height = image.height() - 15; 
     image.css('width', new_width+"px"); 
     image.css('height', new_height+"px"); 
});

來源

2011-01-24 09:40:01 helle

你有語法錯誤，我嘗試它，我很好地工作：

你下面錯過： });

最終的代碼是在這裏：

 

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     var timer; 
     var w="img.width"; 
     var h="img.height"; 
     $('button:has(img)').focus(function() { 
      var $image = $(this).find('img'); 

      timer = setTimeout(function() { 

       $image.animate({ 
        'width': "+=15px", 
        'height': "+=15px" 
       }, 500); 
      }, 
      1000); 

     }); 

     $('button:has(img)').blur(function() { 

      if (timer !== null) clearTimeout(timer); 
      $(this).find('img').animate({ 
       'width': "-=15px", 
       'height': "-=15px" 
      }, 0); 
     }); 
    }); 
</script>

來源

2011-01-24 09:54:47

jquery中的圖像大小

回答

相關問題