jQuery 学习笔记3 点击弹出一个div并允许拖拽移动
这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章，感谢他的分享。
首先我们有一个a标签和一个div，div默认是不显示的，当用户点击时改为显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>drag</title> <style type="text/css">
*{margin: 0;padding: 0;}
#box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
}
#hd{background-color: #666666;font-size: 14px;padding: 4px;}
span{float: right;padding-right: 4px;}
#cnt{padding: 5px;}
</style>
</head>
<body>
<div id="btn">
<a href="#">点我弹框</a>
</div>
<div id="box">
<div id="hd">
<span>关闭</span><h3>这里是标题</h3>
</div>
<div id="cnt">
这里是一些文字
</div>
</div>
</body>
</html>
首先做点css，效果如下
然后隐藏div，添加jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>drag</title>
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
// alert(111);
$('#btn a').click(function() {
// alert(222);
$('#box').show();
});
});
</script> <style type="text/css">
*{margin: 0;padding: 0;}
#box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
display: none;
margin-left: 30px;
margin-top: 20px;
}
#hd{background-color: #666666;font-size: 14px;padding: 4px;}
span{float: right;padding-right: 4px;}
#cnt{padding: 5px;}
</style>
</head>
<body>
<div id="btn">
<a href="#">点我弹框</a>
</div>
<div id="box">
<div id="hd">
<span>关闭</span><h3>这里是标题</h3>
</div>
<div id="cnt">
这里是一些文字
</div>
</div>
</body>
</html>
到此，点击显示就完成了。下面来完成关闭。给关闭span添加了一个鼠标手形的样式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>drag</title>
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
// alert(111);
$('#btn a').click(function() {
// alert(222);
$('#box').show();
});
$('span').click(function() {
// alert(333);
$('#box').hide();
});
});
</script> <style type="text/css">
*{margin: 0;padding: 0;}
#box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
display: none;
margin-left: 30px;
margin-top: 20px;
}
#hd{background-color: #666666;font-size: 14px;padding: 4px;}
span{float: right;padding-right: 4px;cursor: pointer;}
#cnt{padding: 5px;}
</style>
</head>
<body>
<div id="btn">
<a href="#">点我弹框</a>
</div>
<div id="box">
<div id="hd">
<span>关闭</span><h3>这里是标题</h3>
</div>
<div id="cnt">
这里是一些文字
</div>
</div>
</body>
</html>
div的关闭
下面我们来完成另一个任务，就是拖拽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>drag</title>
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
// alert(111);
$('#btn a').click(function() {
// alert(222);
$('#box').show();
});
$('span').click(function() {
// alert(333);
$('#box').hide();
}); $('#hd').mousedown(function(event) {
// alert(444);
var isMove = true;
var abs_x = event.pageX - $('div#box').offset().left;
var abs_y = event.pageY - $('div#box').offset().top;
// alert(abs_x);
// alert(event.pageX);
$(document).mousemove(function(event) {
// alert(555);
if (isMove) {
var obj = $('div#box');
// alert(obj);
obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
};
}).mouseup(function(event) {
isMove = false;
});;
});
});
</script> <style type="text/css">
*{margin: 0;padding: 0;}
#box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
display: none;
margin-left: 30px;
margin-top: 20px;
position: absolute;
}
#hd{background-color: #666666;font-size: 14px;padding: 4px;cursor: move;}
span{float: right;padding-right: 4px;cursor: pointer;}
#cnt{padding: 5px;}
</style>
</head>
<body>
<div id="btn">
<a href="#">点我弹框</a>
</div>
<div id="box">
<div id="hd">
<span>关闭</span><h3>这里是标题</h3>
</div>
<div id="cnt">
这里是一些文字
</div>
</div>
</body>
</html>
拖拽
虽然过程有些曲折，但终于还是完成了。
left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值)
top = 当前鼠标位置.y - (鼠标点击时的.y值 - div的初始位置y值)
。
jQuery 学习笔记3 点击弹出一个div并允许拖拽移动的更多相关文章
- 点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery 学习笔记2 点击时弹出一个对话框
上次学习的是页面加载完成后弹出一个警告框,这里我们改为当用户点击后弹出一个警告框. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
- jQuery第二课 点击弹出一个提示框
选择器允许您对元素组或单个元素进行操作. jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...
- 点击按钮弹出一个div层
JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
- 点击文字弹出一个DIV层窗口代码 【或FORM表单 并且获取点击按钮的ID值】
点击不同按钮咨询不同的 专家 <?php for($i=1;$i<5;$i++){ $uid=$i; //用户ID ?> <a class="a_click" ...
- Jquery学习之路(三) 实现弹出层插件
弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 ...
- elementUI 弹出框添加可自定义拖拽和拉伸功能，并处理边界问题
开发完后台管理系统的弹出框模块,被添加拖拽和拉伸功能,看了很多网上成熟的帖子引到项目里总有一点问题,下面是根据自己的需求实现的步骤: 首先在vue项目中创建一个js文件eg:dialog.js imp ...
- jQuery第一课 加载页面弹出一个对话框
<script type="text/javascript"> $(document).ready(function(){ alert("欢迎收看:" ...
- 页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div，点击空白消失
\ <input id="test" type="button" />/*按钮*/ <div id="tanchu"> ...
随机推荐
- 【Eclipse】Eclipse如何如何集成Tomcat服务器
需要的环境 下载和配置JDK 读者可参见JDK的安装与配置 下载和配置Tomcat 读者可参见Tomcat的下载和配置 下载Eclipse 读者可参见Eclipse官方网站 Eclipse 4.4.0 ...
- 【struts2】action中使用通配符
在以前的学习中,<action>元素的配置,都是用明确的配置,其name.class等属性都是一个明确的值.其实Struts2还支持class属性和method属性使用来自name属性的通 ...
- mysql 5.5数据库主从配置步骤详解
上次给大家介绍了mysql 5.1主从搭建配置教程,这次我们来实现mysql 5.5的主从复制,其实大体上配置是差不多的,只有点细微的差别. 系统:centos 5.x 需要的软件包:mysql-5. ...
- stm8 时钟输出引脚
CLK_CCO引脚是STM8的时钟输出引脚,若设置该脚输出主时钟Fmaster,时钟输出寄存器可以进行如下操作 CLK->CCOR=0X19;
- python中decode和encode的区别
#-*-coding:utf-8 import sys ''' *首先要搞清楚,字符串在Python内部的表示是unicode编码,因此,在做编码转换时,通常需要以unicode作为中间编码, 即先将 ...
- Ubuntu下设置开机后自动运行命令（转）
从道理上来讲,Ubuntu开机应该是能够设置执行一些脚本的,事实上确实如此,网上给出了很多解决的方案,基本上是分为两种, 第一种是编辑/etc/下的rc.local脚本, 然后把对应的需要执行的脚本写 ...
- 基础004_V7-DSP Slice
主要参考ug479.pdf.之前的文章:FIR调用DSP48E_05.本文主要记录基本用法. 一.DSP48核 A-参数说明 instrctions,多个功能,通过sel选用 目前没发现C勾选与否,有 ...
- HBase随机读写
HDFS不太适合做大量的随机读应用,但HBASE却特别适合随机的读写 个人理解: 1.数据库一般都会有一层缓存,任何对数据的更改实际上是先更改内存中的数据.然后有异步的守护进程负责将脏页按照一定策略刷 ...
- 《深入理解jvm》笔记---第六章
类文件结构 1. Java一次编写,到处执行的基石: Java编译产生的是字节码(bytecode).sun公司和其它虚拟机提供商公布各个平台上的虚拟机.这些虚拟机能够加载和执行这些与平台无关的 ...
- React Native超棒的LayoutAnimation(布局动画)
该文翻译自:https://medium.com/@Jpoliachik/react-native-s-layoutanimation-is-awesome-4a4d317afd3e#.6 ...