Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
Кактус
 Аватар для eocron
67 / 67 / 19
Регистрация: 23.05.2012
Сообщений: 342

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

18.02.2013, 23:52. Показов 1378. Ответов 4
Метки нет (Все метки)

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

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) 
      } 
}
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
18.02.2013, 23:52
Ответы с готовыми решениями:

Увеличение картинки в js
Здравствуйте) Помогите пожалуйста с решением такой задачи: Есть страница html с текстом, в который вставлены несколько картинок, и нужно...

увеличение картинки по клику
Подскажите пожалуйста, как увеличить картинку по клику, чтобы она размещалась скажем в левом верхнем углу таблицы

Zoom увеличение картинки
Как можно реализовать увеличение картинки при наведении в отдельном блоке ?, у Bootstrap есть готовое решение по увеличению фотки в этом же...

4
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,531
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";
 };
 
 
 })();
1
Кактус
 Аватар для eocron
67 / 67 / 19
Регистрация: 23.05.2012
Сообщений: 342
19.02.2013, 21:40  [ТС]
Уммм, окай, спасибо! Буду разбираться )
0
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,531
19.02.2013, 22:09
Цитата Сообщение от eocron Посмотреть сообщение
Буду разбираться
Девицу по имени Удача, тебе на колени....
0
Кактус
 Аватар для eocron
67 / 67 / 19
Регистрация: 23.05.2012
Сообщений: 342
19.02.2013, 22:31  [ТС]
Цитата Сообщение от newJS Посмотреть сообщение
Девицу по имени Удача, тебе на колени....
Оказалось проще, чем ожидалось ))
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
19.02.2013, 22:31
Помогаю со студенческими работами здесь

Увеличение картинки (JS+CSS)
Здравствуйте! Я только начал учится, поетому, если что не так, то не судите строго. У меня такая проблема: при использовании скриптов...

Плавное увеличение картинки
Пишу для этого свой скрипт, но что-то не работает. Вот код картинки: &lt;img src=&quot;photo/thumb2-1.jpg&quot; width=&quot;70&quot;...

увеличение картинки при нажатии
Помогите пожалуйста. Дело в том что мне нужен небольшой скрип который будет увеличивать картинку до стандартного размера, а при нажатии...

Увеличение картинки при наведении
При наведении должен постепенно увеличится размер, тут сразу увеличивается(как будто картинка сразу большего размера появляется) как...

Увеличение картинки при нажатии.
Как сделать так что при нажатии на картинку,она увеличелась???


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Модель ЗдрввоСохранения 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 существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru