<html>
<head>
<style type='text/css'>
#d{
border:1px solid green;
width:90px;
height:60px;
background-color:#EEEEFF;
position:absolute;
}
#info{
border:1px solid blue;
width:900px;
height:600px;
}
</style>
</head>
<script src="js/jquery.min.js" language="javascript"></script>
<body>
<div id='d'>foidsajfd</div>
</body>
<script type='text/javascript'>
var global_MOUSEDOWN=false;
var box=$('<div />');
box.css({display:'none',position:'absolute',border:'1px dotted red'});
box.appendTo('body');
box.html("aaa");
var _x,_y;
$('#d').mousedown(function(event){
global_MOUSEDOWN=true;
var offset=$('#d').offset();
_x=event.pageX-offset.left;
_y=event.pageY-offset.top;
box.width($(this).width());
box.height($(this).height());
box.css({left:event.pageX-_x,top:event.pageY-_y});
box.show();
});
$(document).mousemove(function(event){
if(global_MOUSEDOWN){
box.css({left:event.pageX-_x,top:event.pageY-_y});
}
}).mouseup(function(event){
if(global_MOUSEDOWN){
$('#d').animate({left:box.offset().left,top:box.offset().top},1000);
box.hide();
}
global_MOUSEDOWN=false;
});;
</script>
</html>

随鼠标移动的div的更多相关文章

  1. 鼠标划过用户名时在鼠标右下角显示div展示用户资料

    最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...

  2. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  3. 简单的鼠标可拖动div 兼容IE/FF

    来源:http://www.cnblogs.com/imwtr/p/4355416.html 作者: 主要思路: 一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度 ...

  4. 只要把鼠标移上Div方框，方框就自动顺时针旋转

    这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的 ...

  5. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

  6. 鼠标移至div内部其他层时，触发mouseout

    话说有一个DIV元素,其内部有一个IMG元素和SPAN元素,不用理会这两个内部元素怎么布局,这不是我要讨论的重点. 为了实现一些特殊的效果,我需要利用TD的onmouseover和onmouseout ...

  7. 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）

    效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...

  8. chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持，技巧：要在鼠标上的 div上 勾 :hover

    chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

  9. Jquery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果

    有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库.(当鼠标移动到id=menu的div上的时候,显示id=list的div, ...

  10. [Js]跟随鼠标移动的div

    例子:鼠标移动到一块东西上,出现提示文本框,并且提示文本框跟着鼠标的位置动 document.onmouseover=function(ev){ var oEvent=ev||event; var b ...

随机推荐

  1. WP8.1&Win10幸运大转盘源码分享

    先AD一下我的群:Win10开发者群:53078485 最近在写一个APP,其中需要一个转盘动画的源码,找了很多但是都没有找到,无奈只好自己来写,写完效果自己还是比较满意的,分享出来,有需要的童鞋可以 ...

  2. c#取得控制台应用程序根目录

    1.取得控制台应用程序的根目录方法 方法1.Environment.CurrentDirectory 取得或设置当前工作目录的完整限定路径方法2.AppDomain.CurrentDomain.Bas ...

  3. 项目笔记---Socket Error Code翻译

    前言 在项目中为了方便调试及客户反馈,需要Socket错误数字的中文解释,MSDN上只有英文版,同时也想自己学习而且方便将来更新ErrorCode的实际发生的情景,顾有此博文. MSDN:https: ...

  4. 【codevs 1200】【NOIP 2012】同余方程 拓展欧几里德求乘法逆元模板题

    模板,,, #include<cstdio> using namespace std; void exgcd(long long a,long long b,long long & ...

  5. PowerDesigner-如何导出建表sql脚本

    1 按照数据库类型,切换数据库. Database-> Change Current DBMS... 2 生成sql脚本 Database -> Database Generation 的 ...

  6. Java基础-四要素之一《封装》

    封装从字面上来理解就是包装的意思,专业点就是信息隐藏,是指利用抽象数据类型将数据和基于数据的操作封装在一起,使其构成一个不可分割的独立实体,数据被保护在抽象数据类型的内部,尽可能地隐藏内部的细节,只保 ...

  7. Tomcat 部署

    <CATALINA_HOME>/webapps: Tomcat的主要Web发布目录,默认情况下把Web应用文件放于此目录. 1.war包部署:  将需要发布的web应用打成war文件, ( ...

  8. Java异常分类

    一.基本概念 看java的异常结构图 Throwable是所有异常的根,java.lang.ThrowableError是错误,java.lang.ErrorException是异常,java.lan ...

  9. 后台管理UI推荐

    目录 一.EasyUI 二.DWZ JUI 三.HUI 四.BUI 五.Ace Admin 六.Metronic 七.H+ UI 八.其它UI 九.总结 最近要做一个企业的OA系统,以前一直使用Eas ...

  10. 【POJ 1094】拓扑排序

    题意 给出n,代表有以A开始的n个字母,给出它们的m个小于关系(A<B).如果前i个关系可以确定n个字母的一个顺序就输出: Sorted sequence determined after i ...