本文实例讲述了jQuery实现的简单拖动层。分享给大家供大家参考,具体如下:
运行效果图如下:
完整代码如下:
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”在
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt;脚本src=" https://www.yisu.com/zixun/jquery-1.4.2.min.js "=" javascript语言祝辞& lt;/script>
& lt; title>无标题文档& lt;/title>
& lt;/head>
& lt; body>
& lt; div id=薄霸诎聪率蟊昙纯赏隙? lt;/div>
& lt; div id=癰”祝辞& lt;/div>
& lt;/body>
& lt;脚本语言=癹avascript”比;
$(函数(){//警报(“aaaaaaa”);
var x;
var y;
var最高;
var离开;
var clix;
var cliy;
var pd;
var外汇;
var;财政年度
$ (" # ").mousedown(函数(f) {
pd=true;
如果(f) {
f=window.event;
}
fx=f.clientX;
财政年度=f.clientY;
直顶=$(这).offset()上;
左=$(这).offset () .left;
});
$ (" # ").mousemove(函数(e) {
如果(e) {
e=window.event;
}
clix=e.clientX;
cliy=e.clientY;
如果(pd==true) {
(美元). css({“顶”:+ (cliy-fy),“左”:左+ (clix-fx)});
}
$ (" # b”)。text (e。clientX + " " + e.clientY);
});
$ (" # ").mouseup(函数(){
pd=false;
});
}）
& lt;/script>
& lt;/html>
之前
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》,《jQuery扩展技巧总结》,《jQuery切换特效与技巧总结》,《jQuery遍历算法与技巧总结》,《jQuery常见经典特效汇总》及《jQuery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
