使用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 GridView 实现自动计算操作代码
Mar 25 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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模板技术原理【一】
2008/01/10 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
destoon官方标签大全
2014/06/20 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
PHP实现简单的计算器
2020/08/28 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python os.path模块常用方法实例详解
2018/09/16 Python
Python列表切片操作实例总结
2019/02/19 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
python如何查看网页代码
2020/06/07 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
劳动之星获奖感言
2014/02/01 职场文书
卫生标语大全
2014/06/21 职场文书
承诺书范本大全
2015/05/04 职场文书