Картинка и передвижение по ней

@Shyt_y · Регистрация: 19.03.2011

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

Добрый день!
У меня к вам такой вопрос знатоки, я хочу сделать перемещение по картинке
1. экран 500\500
2. картинка 1000\1000
3. зажатием левой мышки кнопки и двигая мышкой как бы передвигаясь по ней выводя на видимое место другие части картинки

возможно ли это сделать? смогу ли это сделать с помощью javascript или еще jquery потребуется

p.s по правилам один вопрос одна тема за этого не стал все лепить

@newJS · 01.09.2013, 21:28

размер картинки любой

CSS

#advance {width:500px; height:500px; overflow:hidden; margin:55px auto 0 auto;}
#advance {position:relative; top:0px; left:0px;}
#advance {border:2px solid red; border-radius:15px;}
 
#advance img { position:absolute; top:0px; left:0px;}

HTML5

1	<div id="advance"><img src="27.jpg" alt=""></div>

Javascript

(function(){
var Q, d;
Q={};
d=document;
 
 
onload=function(){
Q.el=d.getElementById("advance").getElementsByTagName("img")[0].onmousedown=press;
 
 };
 
function press(ev){
if(ev){Q.el=ev.target;}
else{
Q.el=event.srcElement;
ev=event;};
d.onmousemove=elemMove;
Q.x=ev.clientX-Q.el.offsetLeft;
Q.y=ev.clientY-Q.el.offsetTop;
return false;
 };
 
function elemMove(ev){
var y, x;
if(ev){x=ev.clientX; y=ev.clientY;}
else{
x=event.clientX+(d.documentElement.scrollLeft||d.body.scrollLeft);
y=event.clientY+(d.documentElement.scrollTop||d.body.scrollTop);};
Q.el.style.left=x-Q.x+'px';
Q.el.style.top=y-Q.y+'px';
return false;
 };
 
d.onmouseup=function(){d.onmousemove=null;};
 
 })();

@Shyt_y · 06.09.2013, 21:48 **[ТС]**

а можно как то определить размер внутренний? вот например рамка 500/500 это нормально нечего не надо трогать а вот внутренний который безграничный его нельзя сделать размер картинки ну например картинка 1000/1000 и внутренний тоже 1000/1000 и дальше не перетаскивался.

@newJS · 06.09.2013, 21:58

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

@Shyt_y · 09.10.2013, 12:04 **[ТС]**

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

@Shyt_y 2 / 2 / 0 Регистрация: 19.03.2011 Сообщений: 49
		1
	Картинка и передвижение по ней 31.08.2013, 18:43. Показов 755. Ответов 4 Метки нет (Все метки) Добрый день! У меня к вам такой вопрос знатоки, я хочу сделать перемещение по картинке 1. экран 500\500 2. картинка 1000\1000 3. зажатием левой мышки кнопки и двигая мышкой как бы передвигаясь по ней выводя на видимое место другие части картинки возможно ли это сделать? смогу ли это сделать с помощью javascript или еще jquery потребуется p.s по правилам один вопрос одна тема за этого не стал все лепить 0

@Shyt_y 2 / 2 / 0 Регистрация: 19.03.2011 Сообщений: 49
	06.09.2013, 21:48 [ТС]	3
	а можно как то определить размер внутренний? вот например рамка 500/500 это нормально нечего не надо трогать а вот внутренний который безграничный его нельзя сделать размер картинки ну например картинка 1000/1000 и внутренний тоже 1000/1000 и дальше не перетаскивался. 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	06.09.2013, 21:58	4
	Если правильно понял, речь идет об остановке перемещения при достижении картинкой края окошка. Ежили об этом, то увы, при попытке проверить край, начинается непонятное, я отказался от этого. 0

@Shyt_y 2 / 2 / 0 Регистрация: 19.03.2011 Сообщений: 49
	09.10.2013, 12:04 [ТС]	5
	Ну это не красиво, нужно все ровно искать выход, я видел на одном сайте что это возможно, но я все ровно вам благодарен и большое спасибо за помощь 0

Опции темы