Увеличение картинки

@eocron · Регистрация: 23.05.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте! Не подскажите, что я делаю не так ? Я пытаюсь сделать код который бы увеличивал изображение по клику и все бы ничего, но изображение создается в самом низу страницы и не по центру (в оригинале на практически всех сайтах так и бывает). Прошу помощи как разобраться или киньте подправленный код. Заранее благодарю.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var speed             = 10;    // Fewer - quickier 
var softness         = 20;    // Fewer - softer 
var title             = "Уменьшить изображение";    // Title for closing 
 
document.onclick = remove 
 
function zoom(param1, param2, param3) { 
    imgOld = param1; 
    rwidth = param2; 
    rheight = param3; 
     
 
    img = document.createElement("img"); 
    img.src = imgOld.src; 
    img.width = imgOld.width; 
    img.height = imgOld.height; 
    img.title = title; 
    img.style.cursor = "pointer"; 
    document.body.appendChild(img); 
 
    img.setAttribute("zoomed", "1"); 
    img.style.position = "absolute";
    img.style.margin = "0 auto";
    zooming(); 
} 
 
function zooming() { 
    var width = img.width; 
    var height = img.height; 
     
    if (img.width < rwidth - softness + 1 || img.height < rheight - softness + 1) { 
        if (img.width < rwidth - softness + 1) img.width = parseInt(width) + softness; 
        if (img.height < rheight - softness + 1) img.height = parseInt(height) + softness; 
         
        img.style.left = imgOld.offsetLeft + imgOld.offsetWidth / 2 - img.offsetWidth / 2; 
        img.style.top = imgOld.offsetTop + imgOld.offsetHeight / 2 - img.offsetHeight / 2; 
         
        if (parseInt(img.style.left) < 0) img.style.left = 0; 
        if (parseInt(img.style.top) < 0) img.style.top = 0; 
         
        setTimeout(zooming, speed); 
    } else { 
        img.width = rwidth; 
        img.height = rheight; 
    } 
} 
 
function remove(event) { 
    evt = window.event || event; 
      target = evt.srcElement || evt.target; 
       
      if (target.hasAttribute("zoomed")) { 
          document.body.removeChild(target) 
      } 
}

@newJS · 19.02.2013, 21:20

так сойдет

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
<img src="pics/nature_001.jpg" alt="" class="s_b">
<img src="pics/nature_002.jpg" alt="" class="s_b">
<img src="pics/nature_003.jpg" alt="" class="s_b">
<img src="#" alt="" id="b_s">
<div id="contImg">
<img src="pics/nature_001.jpg" alt="">
<img src="pics/nature_002.jpg" alt="">
<img src="pics/nature_003.jpg" alt="">
</div>

CSS
1
2
3
4
5
.s_b, #contImg img {width:120px; height:70px; cursor:pointer;}
 
#b_s img {position:fixed; top:50%; left:50%; display:none; cursor:pointer;}
#b_s img {border:3px solid red; padding:20px; background:silver;}
#b_s img {border-radius:9px;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
(function(){
var Q, d;
Q={};
d=document;
 
onload=function(){
init();
 };
 
function init(){
var m, k;
m=d.getElementsByTagName("img");
k=m.length;
while(k--){if(m[k].className=="s_b"){m[k].onclick=clickBig;}};
m=d.getElementById("contImg").getElementsByTagName("img");
k=m.length;
while(k--){m[k].onclick=clickBig;};
Q.bigI=d.getElementById("b_s");
Q.bigS=Q.bigI.style;
Q.bigI.onclick=clickHide;
 };
 
function clickBig(){
var w, h;
Q.bigS.display="block";
Q.bigI.src=this.src;
w=Q.bigI.width;
h=Q.bigI.height;
Q.bigS.margin=-(h/2+23)+'px 0 0 '+(-w/2-23)+'px';
Q.bigS.width=w+'px';
Q.bigS.height=h+'px';
 };
 
function clickHide(){
Q.bigS.display="none";
 };
 
 
 })();

или так

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<br><br><br><br>
<div id="contImg">
<img src="pics/nature_001.jpg" alt="">
<img src="pics/nature_002.jpg" alt="">
<img src="pics/nature_003.jpg" alt="">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
<div style="width:2222px; background:pink;">text</div>
<div id="b_s">
<img src="#" alt="">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
.s_b, #contImg img {width:120px; height:70px; cursor:pointer;}
 
#contImg {text-align:center;}
 
#b_s {position:relative; top:0px; left:0px;}
 
#b_s img {position:fixed; top:50%; left:50%; display:none; cursor:pointer;}
#b_s img {border-radius:15px; background:gray;}
#b_s img {border:3px solid red; padding:20px;}
 
#b_s div {top:50%; left:50%; position:fixed; border:0 solid transparent;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
(function(){
var Q, d;
Q={};
d=document;
 
onload=function(){
init();
 };
 
function init(){
var m, k, s;
m=d.getElementById("contImg").getElementsByTagName("img");
k=m.length;
while(k--){m[k].onclick=clickBig;};
Q.bigI=d.getElementById("b_s");
m=Q.bigI.getElementsByTagName("div");
Q.door0=m[0].style;
Q.door1=m[1].style;
Q.door2=m[2].style;
Q.door3=m[3].style;
Q.bigI=Q.bigI.getElementsByTagName("img")[0];
Q.bigS=Q.bigI.style;
Q.bigI.onclick=clickHide;
m="silver";
k="transparent";
s=" ";
Q.door0.borderColor=m+s+k+s+k+s+k;
Q.door1.borderColor=k+s+m+s+k+s+k;
Q.door2.borderColor=k+s+k+s+m+s+k;
Q.door3.borderColor=k+s+k+s+k+s+m;
Q.flag=true;
 };
 
function clickBig(){
var w, h, kw, kh, s;
if(Q.flag){
Q.flag=false;//запрещаем старт следующей пока не отработает текущая
Q.bigS.display="block";
Q.bigS.width='auto';//уговариваем картинку принять новые размеры
Q.bigS.height='auto';
Q.bigI.src=this.src;
w=Q.bigI.offsetWidth;//читаем размеры
h=Q.bigI.offsetHeight;
//учитываем border + padding в css
Q.bigS.margin=-(h/2+(20+3))+'px 0 0 '+(-w/2-(20+3))+'px';//смещаем точно в центр
Q.bigS.width=w+'px';
Q.bigS.height=h+'px';
s=-h/2+'px 0 0 '+(-w/2)+'px';//это жалюзи, 4 штуки
Q.door0.margin=s;
Q.door1.margin=s;
Q.door2.margin=s;
Q.door3.margin=s;
 
s=3;//шаг приращивания
if(w/h<0){kh=h/w.toFixed(3); kw=1;}else{kw=w/h.toFixed(3); kh=1;};
kh=(s*kh.toFixed(3));
kw=(s*kw.toFixed(3));//получаем отдельно шаг по X и Y
showBig(w/2, h/2, w/2, h/2, kw, kh);};//поехали
 
 };
 
function showBig(w, h, w1, h1, kw, kh){//похоже на бабочку
parseInt(w1=w1-kw>0?w1-kw:0);
parseInt(h1=h1-kh>0?h1-kh:0);
if(w1!=0||h1!=0){
Q.door0.borderWidth=h1+'px '+w+'px '+h+'px '+w+'px';
Q.door1.borderWidth=h+'px '+w1+'px '+h+'px '+w+'px';
Q.door2.borderWidth=h+'px '+w+'px '+h1+'px '+w+'px';
Q.door3.borderWidth=h+'px '+w+'px '+h+'px '+w1+'px';
setTimeout(function(){showBig(w, h, w1, h1, kw, kh);}, 60);}
else{
Q.door0.borderWidth=0;//на всякий случай всё обнуляем
Q.door1.borderWidth=0;
Q.door2.borderWidth=0;
Q.door3.borderWidth=0;
Q.flag=true;
//теперь можно ещё что то стартовать, например закрытие
};
 };
 
function clickHide(){
Q.bigS.display="none";
 };
 
 
 })();

@eocron · 19.02.2013, 21:40 **[ТС]**

Уммм, окай, спасибо! Буду разбираться )

@newJS · 19.02.2013, 22:09

Сообщение от eocron

Буду разбираться

Девицу по имени Удача, тебе на колени....

@eocron · 19.02.2013, 22:31 **[ТС]**

Сообщение от newJS

Девицу по имени Удача, тебе на колени....

Оказалось проще, чем ожидалось ))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@eocron Кактус 67 / 67 / 19 Регистрация: 23.05.2012 Сообщений: 342
	19.02.2013, 21:40 [ТС]
	Уммм, окай, спасибо! Буду разбираться ) 0