jquery implementiert die ziehbare Popup-Ebene effects

Heim

Web-Frontend

js-Tutorial

jquery implementiert die ziehbare Popup-Ebene effects_jquery

May 16, 2016 pm 04:22 PM

jquery 可拖拽弹出层

Die Funktion ist sehr einfach, aber sehr praktisch, und der Code ist prägnanter, sodass es hier keinen Unsinn mehr geben wird

Geben Sie den Quellcode an:

Code kopieren Der Code lautet wie folgt:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*
{
Rand: 0px;
Polsterung: 0px;
}
.dragBox
{
Breite: 400px;
Höhe: 200px;
Position: absolut;
oben: 40 %;
übrig: 40 %;
Hintergrund: #e8e8e8;
Z-Index: 8001;
}
.dragBox > div
{
Höhe: 30px;
Cursor: bewegen;
Hintergrund: #00ff21;
Position: relativ;
}

.ui-mask
{
Breite: 100 %;
Höhe: 100 %;
Hintergrund: #000;
Position: absolut;
oben: 0px;
Z-Index: 8000;
Deckkraft: 0,4;
Filter: Alpha(Opazität=40);
}
</style>
<script src="framework/base/jquery-1.8.3.min.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var mouseOffx = 0;
var mouseOffy = 0;
var isDrag = false;
$(".dragBox div:eq(0)").unbind(".click").on("mousedown", function (ev) {
mouseOffx = ev.clientX - $(".dragBox div:eq(0)").offset().left;
mouseOffy = ev.clientY - $(".dragBox div:eq(0)").offset().top;
isDrag = true;
})
$(document).unbind(".click").on("mousemove", function (ev) {
var mourseX = ev.clientX, mourseY = ev.clientY;
var moveX = 0, moveY = 0;
if (isDrag === true) {
moveX = mourseX - mouseOffx;
moveY = mourseY - mouseOffy;
var maxX = $(window).outerWidth(false) - $(".dragBox").outerWidth(false);
var maxY = $(window).outerHeight(false) - $(".dragBox").outerHeight(false);
moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY));
$(".dragBox").css({ "left": moveX, "top": moveY });
}
});
$(document).unbind(".click").on("mouseup", function () {
isDrag = false;
});
});
</script>
</head>
<body>
testen
<div class="ui-mask" id="mask" onselectstart="return false"></div>
<div class="dragBox">
<div>
</div>
</div>
</body>
</html>

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn