js窗口拖动 模版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.echo{
width: 400px;
min-height: 260px;
background: pink;
position: absolute;
} .echo .title{
font: 18px/40px "微软雅黑";
background: #f7f7f7;
padding:0 40px;
color: #666;
cursor: move;
} .echo .title i{
float: right;
font:18px/40px "宋体";
margin-right: -27px;
}
</style>
<body>
<div class="echo">
<h2 class="title">注册<i>×</i></h2>
</div>
</body>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> //1.获取元素 var echo = $('.echo'); var title = echo.children('.title'); var x = 0; var y = 0; var off = 0;//拖动开关 0关闭 1开启 //2.添加鼠标按下事件 title.mousedown(function(e){ //3.根据鼠标的位置-盒子的位置得到鼠标与盒子之间的差值 这个值在移动的过程中不会改变 x = e.clientX - echo.offset().left; y = e.clientY - echo.offset().top; off = 1; }).mousemove(function(e){ //阻止拖动过程中文字被选中
window.getSelection ? window.getSelection().removeAllRanges() : window.document.selection.empty(); //4.添加鼠标移动事件 如果开关关闭直接终止 if(!off){ return ;
} var left = e.clientX - x; var top1 =e.clientY - y; //4.1可以自己定条件限制移动的范围 top1 = top1 <0 ? 0 : top1; left = left<0 ? 0 : left; left = left > $(window).width() - echo.width() ? $(window).width() - echo.width() : left; //5.根据鼠标的位置减当初的差值计算出 盒子移动的位置 echo.css({left:left,top:top1}); }).mouseup(function(){ //鼠标抬起关闭开关 off = 0; }).mouseout(function(){ off = 0; }) </script>
</html>
js窗口拖动 模版的更多相关文章
- 基于jQuery页面窗口拖动预览效果
今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Sa ...
- Duilib改进窗口拖动,使整个窗口都能拖动两种方法(转载)
转载:http://www.cnblogs.com/XiHua/articles/3490490.html 转载:http://blog.csdn.net/lostspeed/article/deta ...
- duilib进阶教程 -- 改进窗口拖动 (12)
现在大家应该都知道caption="0,0,0,32",是指示标题栏区了吧,如果想要整个窗口都能拖动呢? 那直接把高度改成和窗口一样不就得了~O(∩_∩)O~ 嗯,这样是可以,比如 ...
- Winform 窗口拖动
把窗口边框去掉后,窗口拖动问题: private Point mouseOffset; //记录鼠标指针的坐标 private bool isMouseDown = false; //记录鼠标按键是否 ...
- MyEclipse 中 添加 js自动完成模版
MyEclipse 中 添加 js自动完成模版: window>preference>MyEclipse>Files and Editors>JavaScript>Edi ...
- 29.QT-自定义窗口拖动、自定义QToolButton/QPushButton开关按钮、界面阴影,声音等总结
自定义窗口及拖动 1.自定义无边框窗口时,需要将窗口标志设为: Qt::FramelessWindowHint |Qt::WindowSystemMenuHint | Qt::WindowMinMax ...
- JS实现拖动div层移动
JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别---- pageX,pageY,layerX,layerY,clientX,clientY,screen ...
- VUE.JS 窗口发生变化时,获取当前窗口的高度。
VUE.JS # 窗口发生变化时,获取当前窗口的高度. mounted () { const that = this; window.onresize = () => { return (() ...
- 利用SendMessage实现窗口拖动
原文:利用SendMessage实现窗口拖动 利用SendMessage实现窗口拖动 周银辉 想想以前用跟踪鼠标位 ...
随机推荐
- Codeforces 834C - The Meaningless Game
834C - The Meaningless Game 数学. 思路1:判断a•b能不能化成v3且a%v==0且b%v==0.v可以直接用pow求(或者用cbrt),也可以二分求:还可以用map映射预 ...
- Python爬虫Urllib库的高级用法
Python爬虫Urllib库的高级用法 设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Head ...
- 家里各台机器的php性能测试
所用脚本: <?php $before = microtime(true); $list= array( "keya" => "the value a&quo ...
- 【异常】Application failed to start due to an exception org.springframework.beans.factory.BeanCurrentlyInCreationException
一. 异常信息: 2018-05-17 18:03:22.224 -DEBUG [ restartedMain] o.s.b.d.LoggingFailureAnalysisReporter ...
- Java基础-面向对象(08)
面向过程 完成一个需求的步骤:首先是搞清楚我们要做什么,然后在分析怎么做,最后我们再代码体现.一步一步去实现,而具体的每一步都需要我们去实现和操作.这些步骤相互调用和协作,完成我们的需求.面向过程开发 ...
- antd-pro1.0使用jest对react组件进行单元测试
前言 基于React+Ant Design(以下用Antd表示)的项目,在对于自己封装的,或者基于Antd封装的公共组件的自动化测试技术的选型和实践. 背景 随着前端项目越来越大,业务逻辑日益繁杂,协 ...
- (转)(HR面试)最常见的面试问题和技巧性答复
(HR面试)最常见的面试问题和技巧性答复 1.请你自我介绍一下你自己? 回答提示:一般人回答这个问题过于平常,只说姓名.年龄.爱好.工作经验,这些在简历上都有.其实,企业最希望知道的是求职者能否胜任工 ...
- NuGet 控制台代码
安装 Bootstrap 包:Install-package -version 3.0.0 bootstrap -projectname SportsStore.WebUI 这三句常常连用,在不同项目 ...
- ElasticSearch-hadoop saveToEs源码分析
ElasticSearch-hadoop saveToEs源码分析: 类的调用路径关系为: EsSpark -> EsRDDWriter -> RestService -> Rest ...
- C语言描述队列的实现及操作(数组实现)
一.静态数组实现 1.队列接口 #include<stdio.h> // 一个队列模块接口 // 命名为myqueue.h #define QUEUE_TYPE int // 定义队列类型 ...