使用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 相关文章推荐
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 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
写一个用户在线显示的程序
2006/10/09 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
javascript jq 弹出层实例
2013/08/25 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
python 字符串常用函数详解
2019/09/11 Python
python super的使用方法及实例详解
2019/09/25 Python
Python笔记之观察者模式
2019/11/20 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
学院书画协会部门职责
2013/11/28 职场文书
党员承诺书内容
2014/03/26 职场文书
公司经理任命书
2014/06/05 职场文书
学术会议通知范文
2015/04/15 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS