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 ...
随机推荐
- vue中src下的assets文件与static文件的几点区别
区别一: assets文件时src下的,所以最后运行时需要进行打包:而static文件不需要打包就直接放在最终的文件中了. 区别二: assets中的文件在.vue中的template/style下用 ...
- js、css的阻塞问题
js.css的阻塞问题 这篇文章主要是探索js.css的加载顺序及其影响问题. 下面的代码可以让浏览器阻塞: <!DOCTYPE html> <html lang="en& ...
- Java实现Ip代理池
设置Ip代理很多时候都会有用到,尤其是在写爬虫相关项目的时候.虽然自己目前没有接触这种需求,但由于最近比较闲,就写着当作练习吧 爬取代理IP 爬取 关于爬取代理IP,国内首先想到的网站当然是 西刺代理 ...
- [Activator- HelloAkka] Define our Messages
An Actor does not have a public API in terms of methods that you can invoke. Instead its public API ...
- What is Network Address Translation?---reference
http://whatismyipaddress.com/nat What is Network Address Translation? Network Address Translation (N ...
- one-vs-all案例
使用one-vs-all初始手写字母识别 数据特点 每一个图片都是20 x 20的像素矩阵,但是在输入的样本中是一个1 x 400的向量,标签y在{0, 1, 2, ..., 9}之间取值 共有500 ...
- [转]ASP.NET Core / MVC 6 HttpContext.Current
本文转自:http://www.spaprogrammer.com/2015/07/mvc-6-httpcontextcurrent.html As you know with MVC 6, Http ...
- SQL更新派工单数量=任务数量的
select b.FCommitQty '任务数量',a.FQty '派工数量',a.FSourceBillNo '派工单号',b.FBillNo '任务单号',a.FStatus '派工状态' fr ...
- querySelector()与querySelectorAll()的区别及NodeList和HTMLCollection对象的区别
querySelector().Document.Element类型均可调用该方法. 当用Document类型调用querySelector()方法时,会在文档元素范围内查找匹配的元素:而当用Elem ...
- SVM个人学习总结
SVM个人学习总结 如题,本文是对SVM学习总结,主要目的是梳理SVM推导过程,以及记录一些个人理解. 1.主要参考资料 [1]Corres C. Support vector networks[J] ...