Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.11.2009, 14:07
Интересующийся
Отправить личное сообщение для valek1989 Посмотреть профиль Найти все сообщения от valek1989
 
Регистрация: 15.09.2009
Сообщений: 10

Закрепление фотографии
Привет, возникла проблемма: мне нужне что бы фотка была "приклеена " к границам, то есть если я делаю ресайз при том что нахожусь в правом верхнем углу фотографии(фотка больше окна браузера намного), то делая ресайз передвигая границу браузера вправо, она должна перемещаться вместе с границей, помогите плз))
Ответить с цитированием
  #2 (permalink)  
Старый 03.11.2009, 14:55
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

А при чем здесь js? Все решается банально - версткой.
сделайте выравнивание по правому краю.
Ответить с цитированием
  #3 (permalink)  
Старый 03.11.2009, 15:03
Интересующийся
Отправить личное сообщение для valek1989 Посмотреть профиль Найти все сообщения от valek1989
 
Регистрация: 15.09.2009
Сообщений: 10

Да, но тогда будет проблема с другим краем. Мне нужно организовать перемещение по фото при помощи мыши, с ограничением по краям, а если уменьшить окно брузера и ресайзную вручную при том что окно браузера находится в одном из граничных положений то будет выход за пределы фотографии, вот в чем роблема
Ответить с цитированием
  #4 (permalink)  
Старый 03.11.2009, 18:32
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Нарисуйте что ли, что Вы хотите добиться, а еще лучше код в студию, потому как мод телепат у меня барахлит.

Но вообще чуствую я Вам сюда:http://javascript.ru/blog/Andrej-Par...enta-elementov
Ответить с цитированием
  #5 (permalink)  
Старый 03.11.2009, 18:48
Интересующийся
Отправить личное сообщение для valek1989 Посмотреть профиль Найти все сообщения от valek1989
 
Регистрация: 15.09.2009
Сообщений: 10

<a target="_blank" href="http://radikal.ru/F/s41.radikal.ru/i093/0911/84/52f0e29c6f04.png.html"><img src="http://s41.radikal.ru/i093/0911/84/52f0e29c6f04t.jpg" ></a>
Ответить с цитированием
  #6 (permalink)  
Старый 03.11.2009, 18:49
Интересующийся
Отправить личное сообщение для valek1989 Посмотреть профиль Найти все сообщения от valek1989
 
Регистрация: 15.09.2009
Сообщений: 10

Ответить с цитированием
  #7 (permalink)  
Старый 03.11.2009, 18:52
Интересующийся
Отправить личное сообщение для valek1989 Посмотреть профиль Найти все сообщения от valek1989
 
Регистрация: 15.09.2009
Сообщений: 10

я проше прощения но смысла печатать код нету, потому что там все работает корректно, а мне просто нужна отдельная функция как закрепить все глы фотографии но если нужно то вот код html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Index</title>
<script type = text/javascript>
</script>
</head>
<body>
<div id="outta">
<div id="photobox">
</div>
</div>
</body>
<script type="text/javascript">
function fixEvent(e) {
e = e || window.event;

if (e.pageX == null && e.clientX != null) {
var html = document.documentElement;
var body = document.body;
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
}
if (!e.which && e.button) {
e.which = e.button & 1 ? 1 : (e.button & 2 ? 3 : (e.button & 4 ? 2 : 0))
}
return e
}

function Resize(){
var dragObj = document.getElementById("photobox");
var mouseAnotherOffset = getMouseOffset(dragObj,e);
var newSize = document.getElementById("outta");
if (newSize != null) {
newSize.style.width = document.documentElement.clientWidth;
newSize.style.height = document.documentElement.clientHeight;
}
if ((mouseAnotherOffset.x + document.documentElement.clientWidth - e.pageX) > 2304) {
with (dragObj.style){
left = 2304 - document.documentElement.clientWidth + 'px';
}
}
}

function getPosition(e){
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;

return {x:left, y:top};
}

function getMouseOffset(targ,e) {
var photoPos = getPosition(targ);
return {x:e.pageX -photoPos.x, y:e.pageY - photoPos.y}
}

function onMouseUp(e) {
dragObj = null;
document.onmousemove = null;
document.onmouseup = null;
}

function onMouseMove(e) {
e = fixEvent(e);
with (dragObj.style) {
position = 'absolute';
}
if(!((mouseOffset.x + document.documentElement.clientWidth - e.pageX) > 2304 ||
(mouseOffset.x - e.pageX) < 0)){
with (dragObj.style) {
left = e.pageX - mouseOffset.x + 'px';
}
}
if(!((mouseOffset.y + document.documentElement.clientHeight - e.pageY) > 1728 ||
(mouseOffset.y - e.pageY < 0 ))){
with(dragObj.style) {
top = e.pageY - mouseOffset.y + 'px';
}
}
return false;
}

function onMouseDown(e) {
e = fixEvent(e);
if (e.which!=1){return}
dragObj = this;
mouseOffset = getMouseOffset(this,e);
document.onmousemove = onMouseMove;
document.onmouseup = onMouseUp;
}
</script>
<script type ="text/javascript">
onload = function() {
document.getElementById('photobox').onmousedown = onMouseDown;
return false;
}
</script>

<script type="text/javascript">
window.onresize = function(){
Resize()
}
</script>

</html>

а вот css

html {
overflow:hidden;
}
#photobox{
position:relative;
top:0px;
left:0px;
height:1728px;
width:2304px;
background:url(photo.jpg) 0px 0px;
z-index:1;
border: 2px groove #000000;
}


#outta{
position:relative;
width:1010px;
height:730px;
padding-left:0;
margin-left:0;
}

реализовывал перемещение по фото при помощи мыши с помощью драгндропа, помогите плз, я тока начал в этом всем разбираться((
Ответить с цитированием
  #8 (permalink)  
Старый 03.11.2009, 23:05
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Ссылку я уже дал, собственно Вам осталось только прочесть
Ответить с цитированием
  #9 (permalink)  
Старый 03.11.2009, 23:09
Интересующийся
Отправить личное сообщение для valek1989 Посмотреть профиль Найти все сообщения от valek1989
 
Регистрация: 15.09.2009
Сообщений: 10

спс я уже сделал))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Рамка дял фотографии LZD Общие вопросы Javascript 4 12.02.2009 21:49
Закрепление элемента по вертикали или горизонтали AlexMak (X)HTML/CSS 5 23.12.2008 14:29