今天看到了一个自己可以随心所欲的拖到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. Android RelativeLayout 属性 转自互联网

    // 相对于给定ID控件 android:layout_above 将该控件的底部置于给定ID的控件之上; android:layout_below 将该控件的底部置于给定ID的控件之下; andro ...

  2. Spring Security怎样不让默认的ProviderManager清除密码等信息

    <authentication-manager erase-credentials="false"> ... </authentication-manager&g ...

  3. this,super,和继承

    this是指当前对象的引用,super是指直接父类的引用 比如 我建造一个类 public class Person(){ private String name; private  int age; ...

  4. The Definitive C++ Book Guide and List--reference

    http://stackoverflow.com/questions/388242/the-definitive-c-book-guide-and-list Reference Style - All ...

  5. Java学习第二十五天

    1:如何让Netbeans的东西Eclipse能访问. 在Eclipse中创建项目,把Netbeans项目的src下的东西给拿过来即可. 注意:修改项目编码为UTF-8 2:GUI(了解) (1)用户 ...

  6. jquery解析xml

    更多的项目都是在解析json,今天临时让解析几个xml文件,其实都一样,总结一下吧. 例如我们有这样一个xml文件 <?xml version="1.0" encoding= ...

  7. 每隔5s执行一次动作

    TimeSpan timespan; //第一次获取系统时间 DateTime d1 = DateTime.Now; while (true) { //第二次获取系统时间 DateTime d2 = ...

  8. ASP.NET安全[开发ASP.NET MVC应用程序时值得注意的安全问题](转)

    概述 安全在web领域是一个永远都不会过时的话题,今天我们就来看一看一些在开发ASP.NET MVC应用程序时一些值得我们注意的安全问题.本篇主要包括以下几个内容 : 认证 授权 XSS跨站脚本攻击 ...

  9. Windows10 iis10 arr webfarm

    win10安装arr提示安装失败,但是安装说明中提升iis7及以上版本,iis10却安装失败,坑爹!安装方法: 1.HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSe ...

  10. 如何将使用托管磁盘虚拟机的 OS 盘挂载到其他虚拟机上

    适用场景 当出现虚拟机无法启动等情况时,需要将虚拟机的 OS 磁盘挂载到其他虚拟机上进行问题诊断或者数据恢复.使用托管磁盘的虚拟机无法通过存储浏览器等工具进行管理,只能通过 PowerShell 来操 ...