<!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. IIS反向代理解决Web前端跨域

    1.1 IIS7反向代理解决跨域问题IIS的版本必须是IIS7及其以上,否则没有反向代理功能:按照以下步骤来配置IIS,以实现反向代理: 1.2 配置步骤1. 下载安装ARR(Application ...

  2. CentOS yum 安装 g++ 4.7.2 & c++11

    From this answer to "Install gcc 4.7 on CentOS [6.x]", the easiest way to get g++ 4.7, and ...

  3. 为kubectl配置别名和命令行补齐

    配置别名 # vim ~/.bashrc 添加 alias k='kubectl' # source ~/.bashrc 配置命令行补齐 # yum install -y bash-completio ...

  4. 23种常用设计模式的UML类图

    23种常用设计模式的UML类图 本文UML类图参考<Head First 设计模式>(源码)与<设计模式:可复用面向对象软件的基础>(源码)两书中介绍的设计模式与UML图. 整 ...

  5. iOS开发系列-修改项目工程名

    当前有项目工程名为iOS,需要修改工程名为IFLY.在修改前注意备份项目 修改项目名 出现弹框,点击Rename 修改工程目录文件名 注意Tests与UITests不要删除 选中IFLY.xcodep ...

  6. 自动化测试之sikuli调研

    调研结果 Sikuli可用于web和app的自动化测试中,操作简单,代码容易,但截图过程太过繁琐,所需要的图片内存占用量大,且sikuli的图片识别度较低,需对所要操作的图片进行精准截图. 什么是Si ...

  7. Android Studio 配置快速生成模板代码

    前言 Android studio 有提供快速生成模板代码的功能,其实这个功能也可以自定义配置.此篇博客将讲解如何使用此功能 进入Settings 选择 Editor > Live Templa ...

  8. C# - Finalize 和 Dispose

    重要: https://www.cnblogs.com/Jessy/articles/2552839.html https://blog.csdn.net/daxia666/article/detai ...

  9. 给大家介绍一下linux系统高级命令

    输出重定向(mip.0834jl.com) ;覆盖文件内容 回声' 123 ' 测试;覆盖原始内容 回声' 123 ' 测试;原始存在(共存) echo 'ken2 '(www.jl0834.com) ...

  10. jQuery FormData使用方法

    FormData的主要用途 将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率. 异步上传文件 注:FormData 对象的字段类型可以是 B ...