今天看到了一个自己可以随心所欲的拖到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. unity3d发布到安卓平台

    1.首先你得装上JDK并且配置好环境(就像学java配置环境一样) 百度jdk把下载安装成功 找到安装jdk目录的bin目录,复制路径,例如 C:\Program Files (x86)\Java\j ...

  2. ArrayList,LinkList,HashMap

    ArrayList底层实现数组,这是ArrayList get()方法的源码,底层是数组 根据下标返回在数组中对应的位置 ,查询快,插入慢 // Positional Access Operation ...

  3. CTSC/APIO2018 游记

    狗牌滚粗选手,此博客证明我去过...... CTSC 消失的源代码与消失的分数...... 我也不知道发生了什么....... APIO 旁边两位小哥太强了,心态完全炸裂,最后也滚粗了...... 回 ...

  4. WebAssembly简单指导---译

    开发者指导 本页面提供一步一步的操作将一个简单的程序编译成webassembly 前提要求 为了编译成webAssembly,需要提前安装一些工具: Git.在Linux和OSX下已自带了Git,在W ...

  5. 小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号

    小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号 https://blog.csdn.net/hotqin888/article/details/84111389 小程序中打开网页和pdf h ...

  6. sql server数据库打不开

  7. node.js分片上传文件

    前端 : <html> <head> <title>分片上传文件</title> </head> <body> <div ...

  8. SpringMVC:系统认识一下maven

    网上看了很多springMVC helloworld的教程,非常不满意:首先,maven构建的就很少,再者,绝大部分都是断章取义,让人不明就里.其中有几篇讲的好的,我摘录了一些,自己试着构建了一下项目 ...

  9. Java读写锁

    Java读写锁,ReadWriteLock.java接口, RentrantReadWriteLock.java实现.通过读写锁,可以实现读-读线程并发,读-写,写-读线程互斥进行.以前面试遇到一个问 ...

  10. checkbox中把选项文字与小圆圈关联上

    跳舞 唱歌 阅读 睡觉 <form><input id="1" type="checkbox" name="hobbies" ...