js 实现div跟随鼠标移动
今天看到了一个自己可以随心所欲的拖到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跟随鼠标移动的更多相关文章
- JS打造的跟随鼠标移动的酷炫拓扑图案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div跟随鼠标移动
1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...
- 一组div跟随鼠标移动,反应鼠标轨迹
<!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...
- JS实现图片跟随鼠标移动
在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...
- javascript 一串DIV跟随鼠标移动
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- javascript div跟随鼠标移动
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 鼠标拖动div,div跟随鼠标移动效果
<div id="boxDiv" style='width:20px;height:20px;position:absolute;background:red;'> ...
- jquery对div元素进行鼠标移动(稍稍修改下可以实现div跟随鼠标)
/* 网上找了资料都是对于event.clientX和offset().left进行了计算,但是去掉了这个计算方式,直接使用当前坐标也一样,效果都一样不太好 strHeader:标题 jquery定位 ...
- 【案例】DIV随鼠标移动而移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- File upload error - unable to create a temporary file
php上传图片的时候会报错: File upload error - unable to create a temporary file 文件上传错误 - 无法创建一个临时文件 你只需要打开你的php ...
- js 省份城市二级动态联动的例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 【Linux相识相知】文本处理工具之grep\egrep\fgrep及正则表达式
常说Linux上有文本处理的三剑客,grep.sed和awk,本文就grep做出详细的描述,并引出正则表达式. grep NAME:打印模式匹配的行 SYNOPISIS: grep [OPTIONS] ...
- SQL Server Profiler(转载)
SQL Server Profiler工具 一.SQL Profiler工具简介 SQL Profiler是一个图形界面和一组系统存储过程,其作用如下: 图形化监视SQL Server查询: 在后台收 ...
- Android开发过程中部分报错解决方法。
初学Android,最近在使用zxing开发一个条码扫描解析的安卓项目中,遇到以下几个问题.贴出来以供参考. 1.Http请求错误 Android4.0以上要求不能把网络请求的操作放在主线程里操 ...
- 修改Linux时区的2种办法
由于Azure 上所有的服务时间都采用了 UTC 时间.UTC 时间比中国时间晚 8 个小时,该如何按照自己的需要来进行修改呢,下面提供2种办法以供参考: 1.修改 /etc/localtime 文件 ...
- 【Java集合】LinkedList详解中篇
这是关于LinkedList的第二篇文章,我将会源码分析LinkedList的部分重要代码,关键地方我都有注释说明,希望大家能比较明白的看懂! 分析源码按照顺序分析: 变量 构造方法 方法 一.变量 ...
- urllib模块的使用
Python3学习笔记(urllib模块的使用) 1.基本方法 urllib.request.urlopen(url, data=None, [timeout, ]*, cafile=None, ca ...
- 堆(Heap)的实现
这次实现了堆,这个堆不是指系统堆栈的堆,是一种数据结构,见下图 堆的本质就是一个数组(上图中,红色的是值,黑色的是下标)简单的来说就是把一个数组看成是二叉树,就像上图 大堆和小堆分别是指根节点比孩子节 ...
- time&datetime模块
在Python中,和时间处理相关的模块有time,datatime,calendar(不常用)三个. UTCC(Coordinated Universal Time,世界协调时)亦即格林威治天文时间, ...