Перемещаемые пользователем изображения
Представляем Вам интересный JavaScript код, позволяющий посетителю сайта перемещать курсором мышки указанные изображения по страничке. Данный скрипт может быть использован при создании какой-либо браузерной игры, когда необходимо перемещать какие-либо изображения на сайте.
Обращаем Ваше внимание на то, что скрипт может не работать в некоторых браузерах.
Для примера ниже приведены четыре изображения, которые Вы можете самостоятельно переместить курсором мышки:
 |
 |
 |
 |
Для получения таких перемещаемых изображений вставьте в начало Вашей странички следующий JavaScript код:
<script type="text/javascript">
var isNav;
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") isNav = true;
}
function setZIndex(obj, zOrder) { obj.zIndex = zOrder; }
function shiftTo(obj, x, y) {
if (isNav) { obj.moveTo(x,y) }
else {
obj.filter = "invert()"
obj.pixelLeft = x;
obj.pixelTop = y;
}
}
var selectedObj;
var offsetX, offsetY;
function setSelectedElem(evt) {
if (isNav) {
var testObj;
var clickX = evt.pageX;
var clickY = evt.pageY;
for (var i = document.layers.length - 1; i >= 0; i--) {
testObj = document.layers[i]
if ((clickX > testObj.left) &&
(clickX < testObj.left + testObj.clip.width) &&
(clickY > testObj.top) &&
(clickY < testObj.top + testObj.clip.height)) {
selectedObj = testObj;
setZIndex(selectedObj, 100);
return
}
}
}
else {
var imgObj = window.event.srcElement
if (imgObj.parentElement.id.indexOf("picture") != -1) {
selectedObj = imgObj.parentElement.style
setZIndex(selectedObj,100)
return
}
}
selectedObj = null
return
}
function dragIt(evt) {
if (selectedObj) {
if (isNav) { shiftTo(selectedObj, (evt.pageX - offsetX),
(evt.pageY - offsetY)) }
else {
shiftTo(selectedObj, (window.event.clientX - offsetX),
(window.event.clientY - offsetY))
return false
}
}
}
function engage(evt) {
setSelectedElem(evt)
if (selectedObj) {
if (isNav) {
offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
}
else {
offsetX = window.event.offsetX-(document.documentElement.scrollLeft ?
document.documentElement.scrollLeft : document.body.scrollLeft);
offsetY = window.event.offsetY-(document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop);
}
}
return false
}
function release(evt) {
if (document.all) { selectedObj.filter = "" }
if (selectedObj) {
setZIndex(selectedObj, 0)
selectedObj = null
}
}
function setNavEventCapture() {
if (isNav) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
}
function init() {
if (isNav) { setNavEventCapture() }
document.onmousedown = engage
document.onmousemove = dragIt
document.onmouseup = release
}
</script>Далее, в том месте Вашей странички, где необходимо вывести изображения, которые в дальнейшем пользователь сможет перемещать курсором мышки, описываем данные изображения следующим образом:
<table style="width: 100%; height: 100px;">
<tr style="vertical-align: top;">
<td style="width: 25%;">
<div id="picture1" style="position: absolute;">
<img src="image/img_1.png" width="150"></div>
</td>
<td style="width: 25%;">
<div id="picture2" style="position: absolute;">
<img src="image/img_2.png" width="150"></div>
</td>
<td style="width: 25%;">
<div id="picture3" style="position: absolute;">
<img src="image/img_3.png" width="150"></div>
</td>
<td style="width: 25%;">
<div id="picture4" style="position: absolute;">
<img src="image/img_4.png" width="150"></div>
</td>
</tr>
</table>Ну и в самом конце странички, для того, чтобы заработал наш скрипт, вызываем функцию init(), описанную выше, для чего используем следующий код:
<script type="text/javascript">
init();
</script>Обратите внимание, что при использовании данного скрипта в браузере Opera, например, становится невозможным выделить текст, размещенный на страничке, а в IE не получается прокручивать полосы прокрутки курсором мыши. Так что если у Вас не получается, но Вы захотите скопировать приведенной на данной страничке код, то отключите JavaScript в Вашем браузере.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.