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 ...
随机推荐
- Hsl PLC
https://github.com/dathlin/HslCommunication 地址
- Coursera 机器学习 第7章 Support Vector Machines 学习笔记
7 Support Vector Machines7.1 Large Margin Classification7.1.1 Optimization Objective支持向量机(SVM)代价函数在数 ...
- spring mvc 外键允许Null
spring mvc 定义模型外键时允许为Null 新手记录,习惯定义模型时将外键的数据类型为long,基本类型. 这样生成的外键是不允许为Null,但是可以通过设置字段的Column注解,使之允许为 ...
- [转]Show parameter & Table Not exists
本文转自:http://www.cnblogs.com/fangwenyu/archive/2011/01/06/1926774.html 问题描述 在尝试通过show parameter来查看一个参 ...
- PowerDesigner从SqlServer数据库导入数据模型
Powerdesigner 从数据库导入数据 第一步, 打开 powerdesigner, 在菜单选择 [File] 选项, 然后在弹出的下拉单中选择 [Reverse Engineer]选项,再选择 ...
- django细节
1.处理请求 1.1 /add/?a=4&b=5 这样GET方法进行[获取参数] from django.shortcuts import render from django.http i ...
- vscode设置语言
按 ctrl+shift+p 中文设置成英文输入 “配置语言” 打开locale.json 设置 "locale":"en" 英文设置成中文输入 &qu ...
- 自动化运维与Saltstack
一.自动化运维介绍 1.自动化运维产生背景 传统的IT运维是将数据中心中的网络设备.服务器.数据库.中间件.存储.虚拟化.硬件等资源进行统一监控,当资源出现告警时,运维人员通过工具或者基于经验进行 ...
- C#工具类之数据库连接
一.SQL Server /// <summary> /// 数据库的通用访问代码 /// 此类为抽象类, /// 不允许实例化,在应用时直接调用即可 /// </summary&g ...
- git本地分支重命名
1. 本地分支重命名 git branch -m oldbranchname newbranchname 2. 远程分支重命名 (假设本地分支和远程对应分支名称相同) a. 重命名远程分支对应的本地分 ...