<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. model的封装+MJExtension 方便后续处理

    //  基本模型 #import <Foundation/Foundation.h> @interface BasicDataModel : NSObject - (id)initWith ...

  2. 那些不好的Socket服务器设计

    基础Socket 自强的程序猿们都喜欢搞Socket,而且觉得最好自己来封装个组件出来,如果再往上,加入某种数据协议,让上层服务器开发照着此协议走,就是一个小小的框架了.于是,从头开始,最开始的服务器 ...

  3. Android学习第六弹之Touch事件的处理

    在移动开发过程当中,我们经常会遇到手势处理和事件触摸的情况,如果不了解整个事件的处理机制,对于开发的同学和码农是非常痛苦的,但是事件触摸的处理确实是一个非常复杂的过程,细讲起来,估计我都能讲迷糊,这里 ...

  4. Android--自动搜索提示

    一. 效果图 在Google或者百度搜索的时候,在输入关键词都会出现自动搜索的提示内容,类似如下的效果,输入b 则出现包含b的相关词条 二. 布局代码 <?xml version="1 ...

  5. 项目笔记---Windows Service调用Windows API问题

    概要 此文来自于最近一个“诡异”的Windows API调用发现Windows Service在调用某些Windows API的过程中失效,在经过漫长的Baidu,之后终于在StackOverFlow ...

  6. 9、面向对象以及winform的简单运用（输入输出流、图像的上传和读取）

    一.输入输出流 1.概念: 输入输出流主要用于保存.读取文件,其内容保存在内存中. 2.使用方法: using System.IO; //System.IO 命名空间包含允许读写文件和数据流的类型以及 ...

  7. 团队项目作业第二项：利用NABCD模型进行竞争性需求分析

    项目需求分析与建议--NABCD模型(王鲁跃负责) N (Need 需求) 对于现在的学生来说,我们认为打字是很重要的.不管在什么方面都需要进行电脑打字,例如文员.QQ.MSN.制作,论文等等,都需要 ...

  8. Mybatis出现：无效的列类型: 1111 错误

    在使用Mybatis时,不同的xml配置文件,有的会提示:无效的列类型: 1111 比如这个sql: update base.sys_person t set t.rybh=#{rybh},t.xm= ...

  9. iOS边练边学--多线程介绍、NSThread的简单实用、线程安全以及线程之间的通信

    一.iOS中的多线程 多线程的原理(之前多线程这块没好好学,之前对多线程的理解也是错误的,这里更正,好好学习这块) iOS中多线程的实现方案有以下几种 二.NSThread线程类的简单实用(直接上代码 ...

  10. Java基础-常量池

    在class文件中,“常量池”是最复杂也最值得关注的内容. Java是一种动态连接的语言,常量池的作用非常重要,常量池中除了包含代码中所定义的各种基本类型(如int.long等等)和对象型(如Stri ...