今天看到了一个自己可以随心所欲的拖到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. TOJ 1258 Very Simple Counting

    Description Let f(n) be the number of factors of integer n. Your task is to count the number of i(1 ...

  2. Android代码中实现WAP方式联网

    无论是移动.联通还是电信,都至少提供了两种类型的的APN:WAP方式和NET方式.其中NET方式跟WIFI方式一样,无需任何设置,可自由访问所有类型网站,而WAP方式,需要手机先设置代理服务器和端口号 ...

  3. SVN创建资源库和远程连接配置

    SVN创建资源库和远程连接配置 本机安装的是TortoiseSVN-1.7.5.22551-win32-svn-1.7.3.msi 安装好后会在鼠标右键中出现如图最后两项的选项: 创建svn资源库: ...

  4. BNU34058——干了这桶冰红茶!——————【递推】

    干了这桶冰红茶! Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class nam ...

  5. 深入理解JavaScript系列(34):设计模式之命令模式

    介绍 命令模式(Command)的定义是:用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及执行可撤销的操作.也就是说改模式旨在将函数的调用.请求和 ...

  6. ArrayList  集合

    ArrayList       集合:很多数据的一个集合       数组:长度不可变.类型单一 集合的好处:长度可以任意改变  类型随便 集合长度都的问题   很多数据的集合数组类型不可变 长度单一 ...

  7. tomcat常用技巧

    1. 修改Tomcat的名称 适用场景: 在测试服务器资源有限或是在本机服务器部署多套应用系统时,由于要启动多个TOMCAT服务,且TOMCAT服务没有用名称去区分,会造成维护使用上存在一定晨读的不方 ...

  8. javascript小数相减出现一长串的小数位数

    我们要修改网页某个数据的显示格式,需要两步操作: 1.在JS中通过$('.class1 .class2 li:eq(2) span.value').text().trim();类似的语句获取到数据内容 ...

  9. 【Linux】安装Nginx

    注:转自https://www.cnblogs.com/hdnav/p/7941165.html 安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Window ...

  10. 提取url中参数的方法(转换成json格式)

    还是直接上代码吧. //将url中的参数获取到并抓换成json格式 function serilizeUrl(url){ var urlObject={}; //1.正则匹配是不是以?结尾 if(/\ ...