今天看到了一个自己可以随心所欲的拖到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. Js简易代码生成工具

    代码 javascript:(function(){ document.body.innerHTML = '<textarea id="txtTemplate" style= ...

  2. Excel&&word&&PPT

    1. Excel 1.1 制作下拉框 选中单元格或列--> 菜单"数据" --> "数据验证"-->"设置" --> ...

  3. 程序包com.sun.image.codec.jpeg不存在

    在pox.xml中引入依赖 <dependency><groupId>rt</groupId><artifactId>rt</artifactId ...

  4. Java入门系列-07-从控制台中接收输入

    这篇文章帮你使用Scanner类从控制台接收输入 从控制台接收字符串 敲一敲: import java.util.Scanner; public class DemoScanner { public ...

  5. CF 305C ——Ivan and Powers of Two——————【数学】

    Ivan and Powers of Two time limit per test 1 second memory limit per test 256 megabytes input standa ...

  6. 《Python编程从入门到实践》_第八章_函数

    一个简单的函数 先看一个简单的函数 def say_hello(): '''打印hello''' print("Hello!") say_hello() #运行结果 Hello! ...

  7. 使用java applet通过签名访问客户端串口

    前端时间公司有需求要访问客户端串口读取电子称的数据,通过网上资料,决定使用applet通过电子签名的形式实现. 1.先写applet:这里我是使用RXRTcomm.jar LocalFileApple ...

  8. 同源策略和Jsonp、CORS

    一.同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之 ...

  9. SQL Server2008宝典 全书代码

    -- ============================================= -- Create database template -- ==================== ...

  10. Arcgis flex 切片地图麻点

    在arcgis server中发布地图切片完成后,有时候在访问地图的时候会出现很多麻点, 其实是你切片的时候没有注意到一些选项.... 默认的切片是PNG8,说到这可能就明白了吧,png8的色彩范围: ...