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

@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

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

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

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

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