Увеличение картинки средствами JavaScript

Увеличение изображений с помощью JavascriptСтолкнулся с тем, что при увеличении размеров изображения, одно из измерений не меняется. В моем случае не менялась высота. Оказалось что при умножения атрибута height на коэффициент увеличения, высота оставалась той же!:) Во все виноват коэффициент, если он маленький (не очень отличается от единицы, то и результат умножения будет тем же). JavaScript код ниже, демонстрирует плавное увеличение картинки, а по достижению максимального размера - уменьшает. Из возможных улучшений - можно добавить позиционирование , чтобы текст и картинки ниже не ехали, и делать фоновую подложку.

  1. var imgs
  2. setTimeout(init, 0)
  3.  
  4. function init(){
  5. imgs = document.getElementsByTagName("img");
  6. for (var i = 0; i < imgs.length; i++){
  7.  
  8. imgs[i].I = i;
  9. imgs[i].$direct = true;
  10. imgs[i].onclick = resize;
  11. }
  12. }
  13.  
  14. function resize(){
  15. $count = 0;
  16. if (this.$direct) koef = 1.05;
  17. else koef = 0.95;
  18. rs(this);
  19.  
  20. function rs(el){
  21.  
  22. el.onclick = null;
  23. $count++;
  24. w = el.width
  25. h = el.height
  26.  
  27. el.width = w * koef;
  28. el.height= h * koef;
  29. if ((el["$direct"] && parseInt(el.width)<240)||(!el["$direct"] && parseInt(el.width)>=120)) setTimeout(function(){rs(el)}, 30);
  30. else {
  31.  
  32. if(el["$direct"]==false){
  33. el.width = 120;
  34. el.height= 90;
  35. }
  36. el["$direct"]= !el["$direct"];
  37. el.onclick = resize;
  38. }
  39.  
  40.  
  41. }
  42.  
  43. }

  1. <img src="http://farm3.static.flickr.com/2480/3944482235_b98a08a601_m.jpg" width="120" height="90" alt="Черное море мое"><br>
  2. <img src="http://farm3.static.flickr.com/2527/3965960069_427077a699_m.jpg" width="120" height="90" alt="Гора Аю-Даг">

Прикрепленный файлРазмер
images_resize.html1.29 кб

Отправить комментарий

CAPTCHA
Этот вопрос задается для того, чтобы выяснить, пьёте ли Вы кофе или рассылаете спам
1 + 1 =
Решите эту простую математическую задачу и введите результат. То есть для 1+3, введите 4.