Видимая область картинки
Помогите сделать.
На странице несколько слоев картинок. Есть место под фотографию определенного размера. Надо чтобы, если фотография меньше этого размера, то область, которая не входит была невидима. А мышкой двигать фотографию в этой области |
alexander123456789,
поиск ->Jquery Image Zoom Plugin |
Спасибо.
Но надо, чтобы при нажатии мышкой картинку можно было двигать, а при отпускании, она фиксировалась в последнем положении |
Перемещение большой картинки в границах див
alexander123456789,
:cray: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это картинка</title> <style type="text/css"> *{margin:0;padding:0} body{background:#FFBA66} .wrapper{width:760px;height:325px;overflow:hidden;border:#8696B0 8px solid;border-radius:8px;position:relative;margin:20px auto 5px} .map{width:1200px;height:700px;position:relative;left:-200px;cursor:move} .map img{width:100%;height:100%} </style> </head> <body> <div class="wrapper"> <div class="map"><img src="http://i.artfile.ru/1920x1200_675899_[www.ArtFile.ru].jpg"></div> </div> <div class="wrapper"> <div class="map"><img src="https://www.clinicient.com/wp-content/uploads/community-service_forest.jpg"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script> <script type="text/javascript"> $('.map').draggable( { drag: function (event, ui) { var h = $(this).parent().height() - $(this).height(), w = $(this).parent().width() - $(this).width(); ui.position.left > 0 && (ui.position.left = 0); ui.position.top > 0 && (ui.position.top = 0); ui.position.left < w && (ui.position.left = w); ui.position.top < h && (ui.position.top = h); } } ) </script> </body> </html> |
Не плачь. Спасибо большое. Не ожидал, что помогут
|
Часовой пояс GMT +3, время: 22:04. |