Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Увеличение картинки

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
AxqpxA
Отправлено: 19 Июля, 2010 - 16:10:44
Post Id



Новичок


Покинул форум
Сообщений всего: 7
Дата рег-ции: Апр. 2010  
Откуда: Белгород


Помог: 0 раз(а)




Есть такой java script
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. function ImageExpander(oThumb, sImgSrc)
  3. {
  4.         this.oThumb = oThumb;
  5.         this.oThumb.expander = this;
  6.         this.oThumb.onclick = function() { this.expander.expand(); }
  7.        
  8.         this.smallWidth = oThumb.offsetWidth;
  9.         this.smallHeight = oThumb.offsetHeight;
  10.  
  11.         this.bExpand = true;
  12.         this.bTicks = false;
  13.        
  14.         if ( !window.aImageExpanders )
  15.         {
  16.                 window.aImageExpanders = new Array();
  17.         }
  18.         window.aImageExpanders.push(this);
  19.  
  20.         this.oImg = new Image();
  21.         this.oImg.expander = this;
  22.         this.oImg.onload = function(){this.expander.onload();}
  23.         this.oImg.src = sImgSrc;
  24. }
  25.  
  26. ImageExpander.prototype.onload = function()
  27. {
  28.         this.oDiv = document.createElement("div");
  29.         document.body.appendChild(this.oDiv);
  30.         this.oDiv.appendChild(this.oImg);
  31.         this.oDiv.style.position = "absolute";
  32.         this.oDiv.expander = this;
  33.         this.oDiv.onclick = function() {this.expander.toggle();};
  34.         this.oImg.title = "Click to reduce.";
  35.         this.bigWidth = this.oImg.width;
  36.         this.bigHeight = this.oImg.height;
  37.        
  38.         if ( this.bExpand )
  39.         {
  40.                 this.expand();
  41.         }
  42.         else
  43.         {
  44.                 this.oDiv.style.visibility = "hidden";
  45.                 this.oImg.style.visibility = "hidden";
  46.         }
  47. }
  48. ImageExpander.prototype.toggle = function()
  49. {
  50.         this.bExpand = !this.bExpand;
  51.         if ( this.bExpand )
  52.         {
  53.                 for ( var i in window.aImageExpanders )
  54.                         if ( window.aImageExpanders[i] !== this )
  55.                                 window.aImageExpanders[i].reduce();
  56.         }
  57. }
  58. ImageExpander.prototype.expand = function()
  59. {
  60.         this.bExpand = true;
  61.  
  62.         for ( var i in window.aImageExpanders )
  63.                 if ( window.aImageExpanders[i] !== this )
  64.                         window.aImageExpanders[i].reduce();
  65.  
  66.         if ( !this.oDiv ) return;
  67.        
  68.         this.oThumb.style.visibility = "hidden";
  69.        
  70.         this.x = this.oThumb.offsetLeft;
  71.         this.y = this.oThumb.offsetTop;
  72.         this.w = this.oThumb.clientWidth;
  73.         this.h = this.oThumb.clientHeight;
  74.        
  75.         this.oDiv.style.left = this.x + "px";
  76.         this.oDiv.style.top = this.y + "px";
  77.         this.oImg.style.width = this.w + "px";
  78.         this.oImg.style.height = this.h + "px";
  79.         this.oDiv.style.visibility = "visible";
  80.         this.oImg.style.visibility = "visible";
  81.        
  82.         if ( !this.bTicks )
  83.         {
  84.                 this.bTicks = true;
  85.                 var pThis = this;
  86.                 window.setTimeout(function(){pThis.tick();},1);        
  87.         }
  88. }
  89. ImageExpander.prototype.reduce = function()
  90. {
  91.  
  92.         this.bExpand = false;
  93. }
  94. ImageExpander.prototype.tick = function()
  95. {
  96.  
  97.         var cw = document.body.clientWidth;
  98.         var ch = document.body.clientHeight;
  99.         var cx = document.body.scrollLeft + cw / 2;
  100.         var cy = document.body.scrollTop + ch / 2;
  101.  
  102.  
  103.         var tw,th,tx,ty;
  104.         if ( this.bExpand )
  105.         {
  106.                 tw = this.bigWidth;
  107.                 th = this.bigHeight;
  108.                 if ( tw > cw )
  109.                 {
  110.                         th *= cw / tw;
  111.                         tw = cw;
  112.                 }      
  113.                 if ( th > ch )
  114.                 {
  115.                         tw *= ch / th;
  116.                         th = ch;
  117.                 }
  118.                 tx = cx - tw + 100;
  119.                 ty = cy - th + 100;
  120.         }
  121.         else
  122.         {
  123.                 tw = this.smallWidth;
  124.                 th = this.smallHeight;
  125.                 tx = this.oThumb.offsetLeft;
  126.                 ty = this.oThumb.offsetTop;
  127.         }      
  128.  
  129.                 var nHit = 0;
  130.         var fMove = function(n,tn)
  131.         {
  132.                 var dn = tn - n;
  133.                 if ( Math.abs(dn) < 3 )
  134.                 {
  135.                         nHit++;
  136.                         return tn;
  137.                 }
  138.                 else
  139.                 {
  140.                         return n + dn / 10;
  141.                 }
  142.         }
  143.         this.x = fMove(this.x, tx);
  144.         this.y = fMove(this.y, ty);
  145.         this.w = fMove(this.w, tw);
  146.         this.h = fMove(this.h, th);
  147.        
  148.         this.oDiv.style.left = this.x + "px";
  149.         this.oDiv.style.top = this.y + "px";
  150.         this.oImg.style.width = this.w + "px";
  151.         this.oImg.style.height = this.h + "px";
  152.  
  153.  
  154.         if ( !this.bExpand && (nHit == 4) )
  155.         {
  156.                 this.oImg.style.visibility = "hidden";
  157.                 this.oDiv.style.visibility = "hidden";
  158.                 this.oThumb.style.visibility = "visible";
  159.  
  160.                 this.bTicks = false;
  161.         }
  162.        
  163.         if ( this.bTicks )
  164.         {
  165.                 var pThis = this;
  166.                 window.setTimeout(function(){pThis.tick();},1);
  167.         }
  168. }
  169.  

Как сделать так, что бы картинка когда увеличивалась, была посередине экрана а не с боку?
---
Я с JS никоьгда не работал, так что для меня это дремучий лес, помогите пожалуйста!
 
 Top
DeepVarvar Супермодератор
Отправлено: 19 Июля, 2010 - 16:43:52
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)




CODE (javascript):
скопировать код в буфер обмена
  1. this.oDiv.style.text-align = "center";


Что-то в этом роде - короче укажите обьекту в котором показывается эта картинка, свойство text-align

(Отредактировано автором: 19 Июля, 2010 - 16:45:34)

 
 Top
JustUserR
Отправлено: 30 Июля, 2010 - 16:45:52
Post Id



Активный участник


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)




DeepVarvar пишет:
Что-то в этом роде - короче укажите обьекту в котором показывается эта картинка, свойство text-align
Скорее всего в приведенном примере изображение добавляется в корневой элемент body с абсолютым позиционированием - поэтому использования CSS-свойсва text-align в этом случае вероятно не поможет поскольку оно задает размещение вложенных слоев внутри блочного объекта а не его самого
AxqpxA Можете попробовать найти в вашем исходном JS-коде все вхождения свойства style.left и прибавить к нему некоторый отступ который будет центровать изображение - который рассчитвается как var left_off=(document.body.clientWidth-this.oImg.offsetWidth)/2 и значение которого нужно добавить через операцию сложения к указанному отступу


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB