今天看到了一个自己可以随心所欲的拖到div到页面的任意位置。感觉挺好的,就心血来潮的查询了一下,看看网友做的

代码如下:

<script>
function doit(){
var obj = document.getElementById("pad");
obj.style.left = event.x+10;
obj.style.top = event.y+10;
}
window.onload=function(){
document.body.onmousemove = doit;
}
</script>
<div id="pad" style="padding:0px;margin:0px;width:10px;height:10px;left:0px;top:0px;background-color:#ff0000;position:absolute;z-index:100;"></div>

这个网友说不支持FF!!

<script>
function doit(e){
var obj = document.getElementById("pad");

obj.style.left = e.pageX+10;
obj.style.top = e.pageY+10;

}
window.onload=function(){ document.body.onmousemove = doit(event); }
</script>
<div id="pad" style="width:10px;height:10px;position:absolute"></div>

js 实现div跟随鼠标移动的更多相关文章

  1. JS打造的跟随鼠标移动的酷炫拓扑图案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. div跟随鼠标移动

    1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...

  3. 一组div跟随鼠标移动,反应鼠标轨迹

    <!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...

  4. JS实现图片跟随鼠标移动

    在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...

  5. javascript 一串DIV跟随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. javascript div跟随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 鼠标拖动div,div跟随鼠标移动效果

    <div id="boxDiv" style='width:20px;height:20px;position:absolute;background:red;'>   ...

  8. jquery对div元素进行鼠标移动(稍稍修改下可以实现div跟随鼠标)

    /* 网上找了资料都是对于event.clientX和offset().left进行了计算,但是去掉了这个计算方式,直接使用当前坐标也一样,效果都一样不太好 strHeader:标题 jquery定位 ...

  9. 【案例】DIV随鼠标移动而移动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 第十三章:基于socket.io实现即时通信

    安装好环境,请参考ionic环境搭建之windows篇 和 ionic环境搭建之OS X篇 . 服务器端的搭建参考socket io官网,里面有非常详细的描述,按照步骤下来,最终可以在localhos ...

  2. 【CAD】自定义实体的步骤(转)

    本文介绍了构造自定义实体的步骤.必须继承的函数和必须注意的事项 1.新建一个从AcDbEntity继承的类,如EntTest,必须添加的头文件: "stdarx.h"," ...

  3. 部署项目到远程tomcat的413 Request Entity Too Large报错处理

    当项目jar包过多时,部署项目会报错而错误原因很清楚了,文件太大了. 因为用了nginx代理,而nginx默认文件大小有限,所以需要设置nginx上传文件大小限制 client_max_body_si ...

  4. 深入redis内部之redis启动过程之一

    redis作为一个服务器,它的启动是从main函数开始的.redis.c 1. 进程重命名 #ifdef INIT_SETPROCTITLE_REPLACEMENT spt_init(argc, ar ...

  5. js event鼠标事件

    1,鼠标焦点事件 <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...

  6. SQL更新派工单数量=任务数量的

    select b.FCommitQty '任务数量',a.FQty '派工数量',a.FSourceBillNo '派工单号',b.FBillNo '任务单号',a.FStatus '派工状态' fr ...

  7. 如何给swing加上alt+x和ctrl+x快捷键

    1.给菜单栏上的菜单alt+x快捷键非常简单: private JMenu helpInfo = new JMenu("帮助"); helpInfo.setMnemonic(Key ...

  8. openlayers 聚合效果

    //cyd var cydclusterSource = new ol.source.Cluster({ distance: 40, source: new ol.source.Vector({ fe ...

  9. [SQL SERVER系列]工作经常使用的SQL整理,实战篇(三)[原创]

    工作经常使用的SQL整理,实战篇,地址一览: 工作经常使用的SQL整理,实战篇(一) 工作经常使用的SQL整理,实战篇(二) 工作经常使用的SQL整理,实战篇(三) 接着本系列前面两篇继续讨论. 有时 ...

  10. ThreadPoolExecutor实现原理

    转载:https://blog.csdn.net/yanyan19880509/article/details/52718497 前言 做java开发的,一般都避免不了要面对java线程池技术,像to ...