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

@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

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

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

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

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