У меня есть div, изображение (стрелка.gif), другое изображение (Untitled-1.jpg), два текстовых поля и кнопка.
Я хочу переместить стрелку в пределах прокручиваемого div с изображением внутри.Как создать изображение внутри прокручиваемого div

Но у меня возникли проблемы с созданием div в прокручиваемом (создание Без названия-1.jpg заполнения div) и перемещение стрелки.gif на основе координат Untitled-1.jpg. Кто-нибудь может мне с этим помочь? Любая помощь/помощь будут с благодарностью оценены.

<!DOCTYPE html> 
<html> 
<head> 
<title>Move to Click Position</title> 
<style type="text/css"> 
body { 
background-color: #FFF; 
margin: 30px; 
margin-top: 10px; 
} 
#contentContainer { 
border: 5px black solid; 
background-color: #F2F2F2; 
cursor: pointer; 
background-image:url('Untitled-1.jpg'); 
background-repeat: no-repeat; 
background-size: fixed; 

width:1030px; 
height:912px 
} 
#thing { 
position: relative; 
left: 50px; 
top: 50px; 
height: 68px; 
width: 41px; 
transition: left .5s ease-in, top .5s ease-in; 
z-index: 10000; 

} 
</style> 
</head> 


<body> 
<div id="contentContainer"> 
<img id="thing" src="arrow.gif" > 
</div> 

<form method="post" action=""> 
<input type="button" value="submit" name="submit" onclick="getClickPosition()"> 
<input type="text" id="valuex" name="valuex"> 
<input type="text" id="valuey" name="valuey"> 
</form> 

<script src="prefixes.min.js"></script> 
<script> 



function getClickPosition() { 
var theThing = document.querySelector("#thing"); 
var container = document.querySelector("#contentContainer"); 
var x1 = document.getElementById('valuex').value; 
var y1 = document.getElementById('valuey').value; 
var parentPosition = getPosition(x1.currentTarget); 
var parentPosition = getPosition(y1.currentTarget); 
var xPosition = x1 - parentPosition.x - (theThing.clientWidth/2); 
var yPosition = y1- parentPosition.y - (theThing.clientHeight/2); 

theThing.style.left = xPosition + "px"; 
theThing.style.top = yPosition + "px"; 
} 

function getPosition(element) { 
var xPosition = 0; 
var yPosition = 0; 

while (element) { 
    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft); 
    yPosition += (element.offsetTop - element.scrollTop + element.clientTop); 
    element = element.offsetParent; 
} 
return { x: xPosition, y: yPosition }; 
} 
</script> 
</body> 
</html>

2015-07-29 user4945412

Почему это помечено как PHP? – MaggsWeb

Вы можете создать [скрипку] (https://jsfiddle.net/), пожалуйста, –

@ChrisMaggs Извините, я еще не редактировал код. Изображение (untitled-1.jpg) должно поступать из базы данных. – user4945412

Первые вещи я заметил, что у вас есть:

background-size: fixed;

Fixed не вариант для фона размера собственности.

Вы также:

height:912px

Что отсутствует точка с запятой, и сокрушу таблицу стилей далее.

1) Полноразмерная фон

Если вы хотите, чтобы ваш 'Untitled-1.jpg' изображение, чтобы заполнить кадр можно установить фон-размер к любой крышку или .

2) прокрутка ДИВО

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

#div{ 
    width:1030px; 
    height:912px; 
    overflow: auto; 
    }

переполнения авто добавят горизонтальные и вертикальные полосы прокрутки в DIV в событие, которое оно выходит за пределы его границ. Или можете использовать прокрутите, если вы хотите, чтобы полосы прокрутки всегда были видны на div.

Вы также можете использовать переполнение-х и перелив-у указать, какую ориентацию вы хотите прокрутки появляться.

3) Перемещение вещи

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

Demo

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

https://jsfiddle.net/8y0qhdwx/

Я не уверен, где вы идете с этим, но это стоило бы смотреть в холст элемент HTML5, так как он построен, чтобы обрабатывать позиционирование объектов внутри него.

Надеюсь, это поможет.

источник

2015-07-29 13:26:41 Benagain

Как создать изображение внутри прокручиваемого div

ответ

1) Полноразмерная фон

2) прокрутка ДИВО

3) Перемещение вещи

Demo

Смежные вопросы