<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. 《信息安全系统设计基础》实验五 简单嵌入式WEB服务器实验

    实验报告链接:http://www.cnblogs.com/lx20145332/p/6058790.html

  2. 错误C2665: “AfxMessageBox”: 2 个重载中没有一个可以转换所有参数类型

    第一种方法: AfxMessageBox( "Simple   message   box. ");如果先定义一个CString   变量,再赋值就没问题CString   sTe ...

  3. JSONProxy - 获取跨域json数据工具

    JSONProxy是一款很好的获取json数据的代理网站,“Enables cross-domain requests to any JSON API”.当你苦于无法跨域获取json数据时,不妨一试, ...

  4. Java 读取文件到字符串

    Java的io操作比较复杂 package cn.outofmemory.util; import java.io.BufferedReader; import java.io.FileInputSt ...

  5. HTTP协议强化理解

    一:第一波 1.  是什么? 答:是一种定义超文本在网络中如何进行传输的协议!   所有的WWW上的文件都必须遵循! 是基于TCP/IP. 传输路径:  客户端<——>服务端  (全双工) ...

  6. ajax中的application/x-www-form-urlencoded中的使用

    ajax中的application/x-www-form-urlencoded中的使用一,HTTP上传的基本知识 在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定 ...

  7. 小结-Splay

    参照陈竞潇学长的模板写的BZOJ 3188: #include<cstdio> #include<cstring> #include<algorithm> #def ...

  8. 【POJ 2104】 K-th Number 主席树模板题

    达神主席树讲解传送门:http://blog.csdn.net/dad3zz/article/details/50638026 2016-02-23:真的是模板题诶,主席树模板水过.今天新校网不好,没 ...

  9. Java基础-String、StringBuffer、StringBuilder

    看下面这段代码: public class Main { public static void main(String[] args) { String string = ""; ...

  10. Java基础-JVM堆与栈

    首先看一个解析列子 JVM的内存空间: (1). Heap 堆空间:分配对象 new Student() (2). Stack 栈空间:临时变量 Student stu (3).Code 代码区 :类 ...