jquery實(shí)現(xiàn)可拖拽彈出層特效
功能很簡(jiǎn)單，卻非常的實(shí)用，代碼更加的簡(jiǎn)潔，這里就不多廢話了
奉上源碼：
<!DOCTYPE html>
<html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
.dragBox
{
width: 400px;
height: 200px;
position: absolute;
top: 40%;
left: 40%;
background: #e8e8e8;
z-index: 8001;
}
.dragBox > div
{
height: 30px;
cursor: move;
background: #00ff21;
position: relative;
}
.ui-mask
{
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0px;
z-index: 8000;
opacity: 0.4;
filter: Alpha(opacity=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>
test
<div class="ui-mask" id="mask" onselectstart="return false"></div>
<div class="dragBox">
<div>
</div>
</div>
</body>
</html>
相關(guān)文章
jQuery實(shí)現(xiàn)文本顯示一段時(shí)間后隱藏的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)文本顯示一段時(shí)間后隱藏的方法,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-06-06
那篇文章是一篇入門教程，從設(shè)計(jì)思想的角度，講解"怎么使用jQuery"。今天的文章則是更進(jìn)一步，講解"如何用好jQuery"。2011-08-08
這篇文章主要介紹了jQuery Ajax通用js封裝的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
找了個(gè)時(shí)間看了下EasyUI插件，對(duì)它的插件感覺是很舒服，特地把Easy UI的大部分功能屬性做了一下匯總。使用easyUI的朋友可以收藏下。2011-01-01
關(guān)鍵詞匹配搜索想必大家一定會(huì)想到百度，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-09-09
jQuery實(shí)現(xiàn)拼圖小游戲(實(shí)例講解)
下面小編就為大家?guī)硪黄猨Query實(shí)現(xiàn)拼圖小游戲(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
jquery比較簡(jiǎn)潔的軟鍵盤特效實(shí)現(xiàn)方法
這篇文章主要介紹了jquery比較簡(jiǎn)潔的軟鍵盤特效實(shí)現(xiàn)方法,實(shí)例分析了jQuery實(shí)現(xiàn)軟鍵盤特效的具體方法與功能效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
jQuery快速上手：寫jQuery與直接寫JS的區(qū)別詳細(xì)解析
jQuery代碼具體的寫法和原生的Javascript寫法在執(zhí)行常見操作時(shí)的區(qū)別如下所示。需要的朋友可以過來參考下2013-08-08
jquery.Jwin.js 基于jquery的彈出層插件代碼
測(cè)試頁面需要引用jquery的js文件 插件文件jquery.Jwin.js jquery.Jwin插件的使用參數(shù)都有詳細(xì)說明2012-05-05
每次滾動(dòng)的長(zhǎng)度不要固定死，可以直接獲取圖片寬度作為滾動(dòng)的長(zhǎng)度。這樣當(dāng)你的網(wǎng)站有很多地方需要這個(gè)效果的時(shí)候一個(gè)函數(shù)就可以搞定了2011-12-12