<!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随鼠标移动而移动的更多相关文章

  1. 如何用jQuery实现div随鼠标移动而移动（详解）？----2017-05-12

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...

  2. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  3. div跟随鼠标移动

    1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...

  4. 一组div跟随鼠标移动，反应鼠标轨迹

    <!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...

  5. 如何用jQuery实现div随鼠标移动而移动？（详解）----2017-05-12

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...

  6. Jquery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果

    有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库.(当鼠标移动到id=menu的div上的时候,显示id=list的div, ...

  7. 【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果

    :hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果) 这是一个绿色底白色Icon的搜索按钮

  8. html js div随鼠标移动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

    一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...

随机推荐

  1. Windows内存管理（2）--Lookaside结构 和 运行时函数

    1.      Lookaside结构 频繁的申请和回收内存,会导致在内存上产生大量的内存"空洞",从而导致最终无法申请内存.DDK为程序员提供了Lookaside结构来解决这个问 ...

  2. 3. Image Structure and Generation

    名词 Extensible Linking Format(ELF) 3.1 The structure of an ARM ELF image ARM ELF映像包含sections, regions ...

  3. 2019 牛客多校第一场 E ABBA

    题目链接:https://ac.nowcoder.com/acm/contest/881/E 题目大意 问有多少个由 (n + m) 个 ‘A’ 和 (n + m) 个 ‘B’,组成的字符串能被分割成 ...

  4. 20130317 如何批量把文件名称写入txt文档

    1.如何批量把文件名称写入txt文档 COMMAND 窗口例:存放图片的文件夹是 D:\123\就用下面一名命令就OKdir d:\123\*.jpg /b > A.TXT 那么你所以JPG格式 ...

  5. [AH2017/HNOI2017]单旋

    题目 \(\rm splay\)水平太差,于是得手玩一下才能发现规律 首先插入一个数,其肯定会成为其前驱的右儿子或者是后继的左儿子,进一步手玩发现前驱的右儿子或者是后继的左儿子一定只有一个是空的,我们 ...

  6. finalize的作用

    1. finalize的作用 finalize()是Object的protected方法,子类可以覆盖该方法以实现资源清理工作,GC在回收对象之前调用该方法. finalize()与C++中的析构函数 ...

  7. 神经网络 （2）- Alexnet Training on MNIST

    文章目录 Win10 Anaconda下配置tensorflow+jupyter notebook环境 AlexNet 识别MNIST Win10 Anaconda下配置tensorflow+jupy ...

  8. 用Jquery写返回顶部代码

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>jq ...

  9. CSIC_716_20191112【闭包函数和装饰器】

    闭包函数 什么是闭包函数:闭包函数是函数嵌套.函数对象.名称空间和作用域的集合体. 闭包函数必须在函数内部定义,闭包函数可以引用外层函数的名字. # _*_ coding: gbk _*_ # @Au ...

  10. Erlang学习记录:相关工具和文档

    在线工具和文档 网址 说明 OTP Reference Page Index 内置模块查询 Erlang/OTP Applications N Kernel Reference Manual 入门官方 ...