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 ...
随机推荐
- CSS像素、设备独立像素、设备像素之间关系
CSS像素.设备独立像素.设备像素,三者联系紧密又有很大的区别,而我们主要是在做移动端开发的时候需要更多地用到这些概念,那他们分别是指什么呢? 概念 CSS像素(CSS Pixel):适用于web编程 ...
- Programmer Competency Matrix--ref--http://sijinjoseph.com/programmer-competency-matrix/
Note that the knowledge for each level is cumulative; being atlevel n implies that you also know eve ...
- js中防止事件传播的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 通过js操作样式(评分)
<style> td{ font-size:50px; color:yellow; cursor:pointer; } </style> <script type=&qu ...
- Google android开发者 中国官方文档开放了呀
Google官方开发文档地址 包括 android , android TV
- 弹性布局学习-详解flex-wrap(五)
目录 弹性布局学习-介绍(一) 弹性布局学习-详解 flex-direction[决定主轴的方向](二) 弹性布局学习-详解 justify-content(三) 弹性布局学习-详解 align-i ...
- scss-@if指令
@if指令接受表达式和使用嵌套样式,无论表达式的结果只不过是false或null. 语法: @if expression { //CSS codes are written here } scss实例 ...
- ie浏览器 vuejs axios Promise 未定义
随着前端技术的发现,es6语法在被更大范围的使用,而很多的浏览器并不支持ES6,比如IE…… 这里我们介绍几个解决方法. 一.使浏览器兼容ES6基本语法 1.在引入其他脚本前先引入browser.mi ...
- Vue中使用eslint
.eslintrc.js module.exports = { root: true, parser: 'babel-eslint', "env": { "browser ...
- 关于 C# 中接口的一些小结
< 关于 C# 中“接口”的一些小结 > 对于 C# 这样的不支持多重继承的语言,很好的体现的层次性,但是有些时候多重继承的确有一些用武之地. 比如,在 Stream 类 . 图形设备 ...