ホームページ >ウェブフロントエンド >jsチュートリアル >js でムーブボックスの動きの問題を解決_JavaScript スキル
js でムーブボックスの動きの問題を解決_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:07:491441ブラウズ
この記事では、ムーブボックスの移動の問題に対する JS 解決策と、画像のデフォルトのドラッグ イベントをキャンセルする関連操作を参考までに紹介します。具体的な内容は次のとおりです。
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="../Content/StyleSheet5.css" rel="stylesheet" />
<script src="../Scripts/JavaScript5.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="center">
<div id="black"></div>
<div id="movebox">
<img id="moveimg" src="../Images/b.jpg"/>
</div>
<img id="bigimg" src="../Images/b.jpg" />
</div>
</body>
</html>
js:
var movebox;
window.onload = function () {
movebox = document.getElementById("movebox");
movebox.addEventListener("mousedown", function (e) {
if (e.button > 0) {
fun2();
return false;
}
e.preventDefault && e.preventDefault(); //明哥：去掉图片拖动响应 狠重要
gen.x = e.clientX;
gen.y = e.clientY;
gen._x = movebox.offsetLeft;
gen._y = movebox.offsetTop;
gen.dx = gen.x - gen._x;
gen.dy = gen.y - gen._y;
document.addEventListener("mousemove",fun1,false);
document.addEventListener("mouseup", fun2, false);
}, false);
};
var fun1 = function (e) {
gen.L = e.clientX - gen.dx;
gen.T = e.clientY - gen.dy;
var timefun = function () {
window.getSelection().removeAllRanges();
if (gen.L < 100)
gen.L = 100;
else if (gen.L > 200)
gen.L = 200;
if (gen.T < 125)
gen.T = 125;
else if (gen.T > 175)
gen.T = 175;
setLT(movebox, gen.L, gen.T);
};
setTimeout(timefun, 2);
};
var fun2 = function () {
document.removeEventListener("mousemove", fun1, false);
document.removeEventListener("mouseuo", fun2, false);
};
var gen = {
x: null,
y: null,
_x: null,
_y: null,
dx: null,
dy: null,
L: null,
T:null,
};
var setLT = function (dom, L, T) {
dom.style.left = L + "px";
dom.style.top = T + "px";
};
CSS:
body {
position:absolute;
margin:0;
padding:0;
}
#center{
position:absolute;
top:200px;
left:300px;
width:400px;
height:400px;
background-color:#808080;
}
#black{
position:absolute;
width:400px;
height:400px;
z-index:80;
background-color:#000;
opacity:0.6;
}
#bigimg{
z-index:50;
position:absolute;
left:100px;
top:125px;
}
#movebox{
z-index:100;
position:absolute;
width:100px;
height:100px;
left:150px;
top:150px;
overflow:hidden;
cursor:move;
background-color:#ff6a00;
}
#moveimg{
position:absolute;
left:-50px;
top:-25px;
}
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。