今天看到了一个自己可以随心所欲的拖到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. Charts in Ionic

    Chart对于任何应用来说都是不可或缺的一部分,hybrid app也是如此. 先罗列一下有哪些可用的Chart library: D3.JS -- Data-Driven Documents,BSD ...

  2. Java开发环境搭建——IntelliJ Idea开发环境

    IntelliJ Idea版本选择由于公司使用JDK7,所以我选择安装Version 2016.1.4(手动安装试验出来的,最新版的2016.1.4启动时提示需要安装JDK8)下载 前面说明有误,其实 ...

  3. 阿里云centos 7 中tomcat 自启动

    这里我的tomcat的安装路径为 /usr/local/tomcat 1 为tomcat添加自启动参数 catalina.sh在执行的时候会调用同级路径下的setenv.sh来设置额外的环境变量,因此 ...

  4. 细说C#中的序列化与反序列化的基本原理和过程

    虽然我们平时都使用第三方库来进行序列化和反序列化,用起来也很方便,但至少得明白序列化与反序列化的基本原理. 懂得人就别看了! 注意:从.NET Framework 2.0 开始,序列化格式化器类Soa ...

  5. .net 金额中文大写 日期转中文

    金额中文大写 #region 中文大写 /// <summary> /// 返回中文数字 ,如壹佰元整 /// </summary> /// <param name=&q ...

  6. VMware装Linux系统全屏问题

    在VMware上出装Linux,有强迫症的患者总是无法接受它不能全屏的问题,当然网上也有该问题的解决方案,但是搜索出来的答案总是零零散散,让很多初学者望而却步!今天笔者根据自己的机遇总结一遍最完备的解 ...

  7. 调试.NET程序OutOfMemoryException (转载)

    原文地址:http://blog.csdn.net/directionofear/article/details/8009427 应用程序调试,需要有个常规的调试思路,应对各类问题最基本的调试手段是什 ...

  8. BindingResult参数验证的跨层次迭代验证

    public ResponseWrapper<Object> recordAdd(@RequestBody @Valid ReqAddEnterpriseInfoDTO addEnterp ...

  9. 线程安全的Dictionary

    线程安全的DictionaryConcurrentDictionary<TKey, TValue> 类

  10. PAT 1053 Path of Equal Weight

    #include <cstdio> #include <cstdlib> #include <vector> #include <algorithm> ...