Bild in Div zoomen und bewegen
.dragme{
position:relative;
width: 270px;
height: 203px;
cursor: move;
}
Weary Wildebeest
.dragme{
position:relative;
width: 270px;
height: 203px;
cursor: move;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<link href="css.css" rel="stylesheet" type="text/css" media="all"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="Mousewheel/jquery.mousewheel.min.js"></script>
</head>
<body>
<div id="videoContainer" style="overflow:hidden;">
<img id="stream" class="dragme" alt="Camera is loading"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png">
</div>
</body>
</html>
Run code snippet$("#videoContainer").css('height', $('#stream').height());
$("#videoContainer").css('width', $('#stream').width());
$('#videoContainer').on('mousewheel', function (event) {
var height = $('#stream').height();
var width = $('#stream').width();
if (height == 480 && width == 640 && event.deltaY > 0) {
} else {
if (event.deltaY > 0) {
height /= 2;
width /= 2;
$("#stream").css('height', height);
$("#stream").css('width', width);
}
else if (event.deltaY < 0) {
height *= 2;
width *= 2;
$("#stream").css('height', height);
$("#stream").css('width', width);
}
}
});
function startDrag(e) {
if (!e) {
var e = window.event;
}
var targ = e.target ? e.target : e.srcElement;
if (targ.className !== 'dragme') {
return
}
offsetX = e.clientX;
offsetY = e.clientY;
if (!targ.style.left) {
targ.style.left = '0px'
}
if (!targ.style.top) {
targ.style.top = '0px'
}
coordX = parseInt(targ.style.left);
coordY = parseInt(targ.style.top);
drag = true;
document.onmousemove = dragDiv;
return false;
}
function dragDiv(e) {
if (!drag) {
return
}
if (!e) {
var e = window.event
}
var targ = e.target ? e.target : e.srcElement;
// move div element
targ.style.left = coordX + e.clientX - offsetX + 'px';
targ.style.top = coordY + e.clientY - offsetY + 'px';
return false;
}
function stopDrag() {
drag = false;
}
window.onload = function () {
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}