JS 实现元素移动 （拖动图片）
2018-10-16 本文已影响1人
肆意木
JS 实现元素移动的四种方法，实现拖动查看图片，查看 源代码
1. jquery.imagView
main.html:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>可拖动查看大图jquery特效</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.imageView.js"></script>
<script type="text/javascript">
$(function () {
$('#imageView_container').imageView({width: 800, height: 500});
});
</script>
</head>
<body>
<div id="imageView_container">
<img src="photos/image-1680x1050.jpg" rel="photos/image-1680x1050.jpg"/>
</div>
</body>
</html>
jquery.js: https://github.com/hutingting119/JS-move-label/blob/master/jquery.imagView/js/jquery.js
jquery.imageView.js: https://github.com/hutingting119/JS-move-label/blob/ebb08dc57474688b546368877a3931b4da62fa50/jquery.imagView/js/jquery.imageView.js
2.jquery.kinetic
demo.html:
<!DOCTYPE HTML>
<html>
<head>
<title>jQuery.kinetic demos</title>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="jquery.kinetic.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.wrapper {
height: 400px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="../img/4.jpg" />
</div>
<script type="text/javascript" charset="utf-8">
$('.wrapper').kinetic();
document.ondragstart = function () {
return false
}
</script>
</body>
</html>
jquery.kinetic.js: https://github.com/hutingting119/JS-move-label/blob/f141f4546cb38b32a6463143b52a654e26cd72df/jquery.kinetic/jquery.kinetic.js
3. nativeJS
native.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#previewImg {
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
overflow: hidden;
}
.img {
}
</style>
<body>
<div id="previewImg" onmousedown="imgStart(event)">
<img src="../img/2.jpg" class="img">
</div>
</body>
<script>
var ifBool = false;
document.body.parentNode.style.overflow = "hidden";
window.addEventListener("mousemove", imgMove);
window.addEventListener("mouseup", imgEnd);
function imgStart(e) {
e.stopPropagation();
ifBool = true;
}
function imgMove(e) {
if (ifBool) {
var prevewImg = document.querySelector("#previewImg");
var clientHeight = document.documentElement.clientHeight;
var clientWidth = document.documentElement.clientWidth;
if (prevewImg.offsetHeight > clientHeight) {
var topPosition = prevewImg.offsetHeight / 2;
var bottomPosition = -(prevewImg.offsetHeight / 2) + clientHeight;
var moveTop = (bottomPosition < e.clientY && topPosition > e.clientY) ? e.clientY : ((bottomPosition < e.clientY) ? topPosition : bottomPosition);
prevewImg.style.top = moveTop + "px"
}
if (prevewImg.offsetWidth > clientWidth) {
var leftPosition = prevewImg.offsetWidth / 2;
var rightPosition = -(prevewImg.offsetWidth / 2) + clientWidth;
var moveLeft = (rightPosition < e.clientX && leftPosition > e.clientX) ? e.clientX : ((leftPosition < e.clientX) ? leftPosition : rightPosition);
prevewImg.style.left = moveLeft + "px";
}
}
}
function imgEnd() {
ifBool = false
}
</script>
</html>
4. vanilla.kinetic
deml.html:
<!DOCTYPE HTML>
<html>
<head>
<title>jQuery.kinetic demos</title>
<script src="vanilla.kinetic.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#wrapper {
height: 400px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="wrapper">
<img src="../img/2.jpg" alt="wembley stadium"/>
</div>
<script type="text/javascript" charset="utf-8">
new VanillaKinetic(document.getElementById("wrapper"));
document.ondragstart = function () {
return false;
}
</script>
</body>
</html>
vanilla.kinetic.js: https://github.com/hutingting119/JS-move-label/blob/f141f4546cb38b32a6463143b52a654e26cd72df/vanilla.kinetic/vanilla.kinetic.js
