使用jQuery的easydrag插件实现可拖动的DIV弹出框


Posted in Javascript onFebruary 19, 2016

EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件。

在没遇到easydrag插件之前,想实现一个弹出框并不是一件轻而易举的事情!

人们常说没有不劳而获的事情,但在编码的世界中却不是这样。更多的开源框架方面了我们,也毒害了我们!

废话少说,先看效果:

使用jQuery的easydrag插件实现可拖动的DIV弹出框

全部代码:

<!DOCTYPE HTML> 
<html> 
<head> 
<title>easydrag实现可拖动的DIV弹出框</title> 
<style> 
/* 重置浏览器默认样式 */ 
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;} 
ul,ol,li{list-style:none;} 
input,button{margin:0;font-size:12px;vertical-align:middle;} 
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; } 
table{border-collapse:collapse;border-spacing:0;} 
a{ color:#333; text-decoration:none;} 
a:hover{ text-decoration:none;} 
.wrap{ width:960px; margin:20px auto;} 
.box{ display:none; background:#fff; border:1px solid #ccc; position:absolute;} 
#popbox{ width:550px;height:320px;overflow:hidden;} 
#handler{ width:98%; height:30px; line-height:30px; overflow:hidden; color:#fff; border-bottom:1px solid #ccc; background:#ccc; padding-left:2%; float:left;} 
.btn{ display:block; width:90px; height:28px; border:1px solid #ccc; line-height:28px; text-align:center; margin-right:20px; float:left; display:inline; margin-right:15px; cursor:pointer;} 
.close{ display:block; background:url(images/close.gif) no-repeat; width:13px; height:13px; float:right; text-indent:-999em; cursor:pointer; display:inline; margin:8px 12px 0 0;} 
.head i{ float:left; font-style:normal;} 
.content{ width:100%; float:left;} 
.content img{width:100%;} 
</style> 
<!-- 使用百度的jquery在线cdn --> 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
<!-- easydrag.js没有找到在线的cdn,大家可以自行下载 --> 
<script type="text/javascript" src="js/easydrag.js"></script> 
<script language="javascript"> 
$(function(){ 
//btn绑定click事件 
$('.btn').click(function(){ 
//设置弹出框居中 
$('#popbox').css({ 
left: ($(window).width() - $('#popbox').outerWidth())/2, 
top: ($(window).height() - $('#popbox').outerHeight())/2 + $(document).scrollTop() 
}); 
$('#popbox').easydrag(); 
//淡入已隐藏的div 
$('#popbox').fadeIn(); 
$('#popbox').setHandler('handler'); 
$('.close').click(function(){ 
//淡出效果来隐藏弹出的div 
$('#popbox').fadeOut(); 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="wrap"> 
<b class="btn">打开弹出框</b> 
<div id="popbox" class="box"> 
<div class="head" id="handler"><b class="close">关闭</b><i>点击标题位置进行拖动</i></div> 
<div class="content"><a href="http://blog.csdn.net/xmtblog/"><img src="images/img03.jpg" /></a></div> 
</div> 
</div> 
</body> 
</html>

以上内容是小编给大家介绍的使用jQuery的easydrag插件实现可拖动的DIV弹出框,希望对大家有所帮助!

Javascript 相关文章推荐
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 #Javascript
javascript下使用Promise封装FileReader
Feb 19 #Javascript
javascript每日必学之循环
Feb 19 #Javascript
jQuery实现简单的DIV拖动效果
Feb 19 #Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 #Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 #Javascript
基于JavaScript实现弹出框效果
Feb 19 #Javascript
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
php下MYSQL limit的优化
2008/01/10 PHP
PHP 全角转半角实现代码
2010/05/16 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
php限制文件下载速度的代码
2015/10/20 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Python正则表达式指南 推荐
2018/10/09 Python
python滑块验证码的破解实现
2019/11/10 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
商务英语应届生自我鉴定
2013/12/08 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技