<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. 1.1Linux 系统简介（学习过程）

    =====课程笔记===== 一.Linux 为何物 Linux 是一个操作系统,就像你多少已经了解的 Windows(xp,7,8)和 Max OS . Linux 也就是系统调用和内核两层,我们使 ...

  2. Self Organizing Maps (SOM): 一种基于神经网络的聚类算法

    自组织映射神经网络, 即Self Organizing Maps (SOM), 可以对数据进行无监督学习聚类.它的思想很简单,本质上是一种只有输入层--隐藏层的神经网络.隐藏层中的一个节点代表一个需要 ...

  3. 千万不要在JS中使用连等赋值操作

    前言 文章标题这句话原本是在国外某JavaScript规范里看到的,当时并没有引起足够的重视,直到最近一次出现了bug发现JS里的连等赋值操作的特色(坑). 网上搜索一番发现一个非常好的连等赋值的(来 ...

  4. 怎样写 OpenStack Neutron 的 Extension （四）

    上文说到需要在 /neutronclient/v2_0/myextension/extension.py 中分别定义五个 class:List/Show/Create/Delete/UpdateExt ...

  5. 【Javascript】—— 1 方法function的高级特性

    本篇仅仅对于function作简单的讲解,在javascript中function不仅仅是方法,它其实是一个变量,因此拥有自己的属性,并且可以当做参数传递给其他的方法. 那么传统的方法,按照java的 ...

  6. java.lang.NoClassDefFoundError: javax/transaction/UserTransaction

    在运行定时任务的时候报错: Java.lang.NoClassDefFoundError: javax/transaction/UserTransaction 原因:缺少jta的jar包 解决方法:下 ...

  7. Oracle定时执行存储过程

    首先查看 SQL> show parameter job NAME                                 TYPE        VALUE-------------- ...

  8. golang thrift 总结一下网络上的一些坑

    我们以hello world来大概分析一下golang中的thrift包,并且扒一扒网络上有关thrift的一些坑 查看源码,服务器定义如下:(详见simple_server.go文件) type T ...

  9. BZOJ-2257 瓶子和燃料 分解因数+数论方面乱搞（裴蜀定理）

    一开始真没想出解法...后来发现那么水.... 2257: [Jsoi2009]瓶子和燃料 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 970 So ...

  10. 【bzoj1016】 JSOI2008—最小生成树计数

    http://www.lydsy.com/JudgeOnline/problem.php?id=1016 (题目链接) 题意 求图的最小生成树计数. Solution %了下题解,发现要写矩阵树,15 ...