【案例】DIV随鼠标移动而移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div跟随鼠标移动而移动</title>
<style>
*{
margin: 0;
padding: 0;
}
#ball{
width: 200px;
height: 200px;
border-radius: 50%;
background: pink;
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
<script>
//获取元素
var ball = document.getElementById('ball');
console.log(ball);
//将鼠标的移动事件交给外部更大的容器window,以保证鼠标不丢失
/*ball.onmousemove = function(e){}*/
window.onmousemove = function(e){
var e = e || window.event;
var newLeft = e.clientX - ball.offsetWidth / 2;
var newTop = e.clientY - ball.offsetHeight / 2;
ball.style.left = newLeft + 'px';
ball.style.top = newTop + 'px';
}
</script>
</html>
【案例】DIV随鼠标移动而移动的更多相关文章
- 如何用jQuery实现div随鼠标移动而移动（详解）？----2017-05-12
重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- div跟随鼠标移动
1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...
- 一组div跟随鼠标移动，反应鼠标轨迹
<!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...
- 如何用jQuery实现div随鼠标移动而移动？（详解）----2017-05-12
重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...
- Jquery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果
有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库.(当鼠标移动到id=menu的div上的时候,显示id=list的div, ...
- 【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果
:hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果) 这是一个绿色底白色Icon的搜索按钮
- html js div随鼠标移动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery实际案例⑥——图片跟随鼠标、五角星评分案例
一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...
随机推荐
- NX二次开发-C++ DeleteFile删除文件实例代码
NX9+VS2012 #include<Windows.h> DeleteFile("D:\\1\\test123.prt"); Caesar卢尚宇 2019年7月29 ...
- linux centos 安装配置varnish
安装2.0+版本 前期准备: 下载pcre http://sourceforge.net/projects/pcre/files/pcre/ http://optimate.dl.sourceforg ...
- Round Numbers /// 组合计数 oj21455
题目大意: 给定a,b 输出[a,b]的闭区间中round number的数量 所谓round就是一个数在二进制下0的个数大于等于1的个数 0的个数>=1的个数 也就是1的个数<=0的个数 ...
- callable接口的多线程实现方式
package com.cxy.juc; import java.util.concurrent.Callable; import java.util.concurrent.ExecutionExce ...
- C9 vs 三星
我还是更喜欢 C9, 可惜当年的牛B人物 LemonNation 不在了,C9 赢 三星 一局的机会都没有了. 伟大的 LemonNation ,软件工程学硕士, 2014年,LemonNation ...
- 使用Echarts的步骤
Echarts官网地址:https://echarts.baidu.com/index.html 步骤如下: 1.获取Echarts (1)可以在Echarts官网去下载,选择需要的版本下载,根据开发 ...
- sql (3) where
WHERE 子句用于规定选择的标准.语法SELECT 列名称 FROM 表名称 WHERE 列 运算符 值 引号的使用请注意,我们在例子中的条件值周围使用的是单引号. SQL 使用单引号来环绕文本值( ...
- Java 虚拟机 - ClassLoader
ClassLoader定义 ClassLoader种类 BootStrapClassLoader无法在IDEA里面查看源代码,只能看JVM 源码才能找到. ExtClassLoader,会从Syste ...
- Python: map和reduce
可以先google一篇论文:MapReduce: SImplified Data Processing on Large Clusters 1. map map()函数接收2个参数:一个是函数,一个是 ...
- 校园商铺-4店铺注册功能模块-10店铺注册之js实现
1. 建立js目录和文件 1.1 建立js目录 在webapp下新建文件夹js,再在js目录下新建shop文件夹. 1.2 js文件 js的功能: 1.从后台获取到店铺分类.区域等是信息,将它填充到前 ...