<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. python机器学习《入门》

    写在前面的废话: 好吧,不得不说鱼C的markdown文本编辑器挺不错的,功能齐全.再次感谢小甲鱼哥哥的python视频让我去年大三下学期的时候入门了编程,爱上了编程这门语言,由于是偏冷门的统计学,在 ...

  2. php图片水印添加，压缩，剪切的封装类

    php对图片文件的操作主要是利用GD库扩展.当我们频繁利用php对图片进行操作时,会自然封装很多函数,否则会写太多重复的代码.当有很多对图片的相关函数的时候,我们可以考虑将这些函数也整理一下,因而就有 ...

  3. Unity3D 2D游戏中寻径算法的一些解决思路

    需求 unity3d的3d开发环境中,原生自带了Navigation的组件,可以很便捷快速的实现寻路功能.但是在原生的2d中并没有相同的功能. 现在国内很多手机游戏都有自动寻路的功能,或者游戏中存在一 ...

  4. 第二十四课：jQuery.event.remove，dispatch的源码解读

    本课还是来讲解一下jQuery是如何实现它的事件系统的.这一课我们先来讲一下jQuery.event.remove的源码解读. remove方法的目的是,根据用户传参,找到事件队列,从里面把匹配的ha ...

  5. angular的工具方法笔记(equals, HashKey)

    分别是angular脏值检测的工具方法equals和 类HashKey的使用方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  6. Chrome的Crash Report服务

    <本文转自:http://www.cppblog.com/woaidongmao/archive/2009/10/22/99211.aspx> 本文翻译自debugInfo网站上一篇文章g ...

  7. JS所谓的享元模式-->

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  8. Hibernate-一对多的关系维护

    一对多 和多对一 一般是看需求来确定的,很多时候都是设置成双向的 举个最最普通的离子 :一个班级里面有多个学生 多个学生属于一个班级 从学生表来看 就是多对一的关系 从班级表来看就是一对多的关系 需求 ...

  9. BZOJ-2326 数学作业 矩阵乘法快速幂+快速乘

    2326: [HNOI2011]数学作业 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 1564 Solved: 910 [Submit][Statu ...

  10. [NOIP2010] 提高组 洛谷P1540 机器翻译

    题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先 ...