|
Перемещение большой картинки в границах див
alexander123456789,
<!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>
Последний раз редактировалось рони, 04.11.2017 в 22:11.
|
