今天看到了一个自己可以随心所欲的拖到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. 在使用反射时,maven设置依赖范围引起的异常

    背景是,运用annotation进行权限控制,将一个包下面的类.进行反射,然后判断类的annotation,根据annotation设置权限 问题来了,包下面有5个类,在反射时报了 javqx.ser ...

  2. Android NDK 安装与配置

    本文主内容: 1.  Android NDK 安装 2.  安装Cygwin与使用NDK编译 3.  在Eclipse中集成C/C++开发环境CDT 4.  安装Sequoyah插件 5.  JNI编 ...

  3. PHP流程控制之goto语句

    goto 操作符可以用来跳转到程序中的另一位置.该目标位置可以用目标名称加上冒号来标记,而跳转指令是 goto 之后接上目标位置的标记.PHP 中的 goto 有一定限制,目标位置只能位于同一个文件和 ...

  4. 【linux相识相知】压缩与打包

    我们日常使用window的时候,经常会用到压缩与解压缩,如果要压缩一个文件,右击选择[添加到压缩文件],解压缩则右击选择[解压到当前文件夹],“点点点”就能完成.但是在一个没有装图形化界面的linux ...

  5. 【Linux】网络性能测试工具iperf详细使用图文教程【转】

    参考链接:https://www.cnblogs.com/yingsong/p/5682080.html Iperf是一个网络性能测试工具.Iperf可以测试TCP和UDP带宽质量. Iperf可以测 ...

  6. Android界面编程--使用活动条(ActionBar)--实现Tab导航

    使用ActionBar结合fragment实现导航 1,调用ActionBar的setNavigationModel(ActionBar.NAVIGATION_MODE_TABS)设置使用tabs导航 ...

  7. Android - Rxjava 使用和原理

    用RxJava写的一个Android的小Demo 我所理解的RxJava——上手其实很简单 http://www.jianshu.com/p/5e93c9101dc5

  8. for循环的几种比较

    对一个集合遍历的3种方法:1.for(int i=0;i<list.size();i++) 2.for(int i=0,len=list.size();i<len;i++) 3.for ( ...

  9. Csharp: Detect Mobile Browsers

    /// <summary> /// 檢測手機客戶端 HttpCapabilitiesBase.IsMobileDevice /// .NET 4.5 /// 塗聚文注 /// </s ...

  10. JDBC实现动态查询

    一 概述 1.什么是动态查询? 从多个查询条件中随机选择若干个组合成一个DQL语句进行查询,这一过程叫做动态查询. 2.动态查询的难点 可供选择的查询条件多,组合情况多,难以一一列举. 3.最终查询语 ...