Перемещение изображения внутри блока
<style> #raz { overflow: auto; /* полоса прокрутки */ max-height: 400px; -webkit-user-select: none; user-select: none; /* убрать выделение элемента */ } #raz:before { /* картинка в :before не индексируются */ content: url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg); } #raz:active { /* вид курсора CSS */ cursor: pointer; cursor: grabbing; } #raz::-webkit-scrollbar { /* спрятать полосу прокрутки в Chrome */ display: none; } </style> <div id="raz"></div> <script> (function(){ var div = document.getElementById('raz'), x1 = null, y1 = null, z = false; div.addEventListener('mousemove', Raz, false); // событие при движении мышки div.addEventListener('click', Raz, false); // событие при клике div.addEventListener('mouseup', Raz0, false); // событие с отпущенной клавишей мышки div.addEventListener('mouseout', Raz0, false); // событие при выходе за пределы области function Raz(e) { if (z == true || e.type == "click") { div.scrollLeft -= e.clientX-x1; div.scrollTop -= e.clientY-y1; x1 = e.clientX; y1 = e.clientY; } } div.onmousedown = function(e) { // событие с нажатой клавишей мышки var kl = e.keyCode || e.which; if (kl == "1") { // только для левой клавиши мышки z = true; x1 = e.clientX; y1 = e.clientY; } } function Raz0() {z = false;} })() </script>
Тот же принцип был использован при создании генератора area map
Комментариев нет: