<!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. NX二次开发-UFUN读取工程图注释UF_DRF_ask_text_data

    1 NX11+VS2013 2 3 4 #include <uf.h> 5 #include <uf_ui.h> 6 #include <uf_drf.h> 7 8 ...

  2. 牛客多校第六场 D move 枚举/机智题

    题意: 有个家伙装东西,他的策略是贪心,每次装进去这个盒子能装下的最大的东西,直到把这个盒子装满,再去装下一个盒子. 给出盒子的数量k和一些东西的重量,问你最小需要多大的盒子才能以这种贪心策略装下. ...

  3. Java-Class-C：org.springframework.web.client.RestTemplate

    ylbtech-Java-Class-C:org.springframework.web.client.RestTemplate 1.返回顶部 1. org.springframework.web.c ...

  4. 转：container_of分析 研究内核的博客

    源地址:http://blog.csdn.net/tigerjibo/article/details/8299589 2012-12-15 19:23 1636人阅读 评论(2) 收藏 举报   目录 ...

  5. ES6新的特性有哪些？

    1.新增了块级作用域(let,const) 2.提供了定义类的语法糖(class) 3.新增了一种基本数据类型(Symbol) 4.新增了变量的解构赋值 5.函数参数允许设置默认值,引入了rest参数 ...

  6. linux 下安装maven私服

    1.下载最新nexus安装包 下载地址:https://www.sonatype.com/download-oss-sonatype 2.下载JDK7,nexus2版本支持JDK7:nexus1版本支 ...

  7. 如何读懂Web服务的系统架构图

    Web服务的一个重要特点就是流量大.数据多,仅靠一台服务器肯定难以支撑大规模的服务. 所以我们经常会看到诸如以下的一些术语,教人好生不懂: *:系统架构.物理架构.Web服务基础设施 *:应用服务器 ...

  8. Eclipse中普通java项目转成Web项目

    在eclipse导入一个myeclipse建的web项目后,在Eclipse中显示的还是java项目,按下面的步骤可以将其转换成web项目. 1.找到项目目录下的.project文件 2.编辑.pro ...

  9. Maven + Springboot + redis 配置

    前言 刚进入到Java 开发的世界,对于小白Java的我来说,使用Maven + SpringBoot 的项目下启动redis: 第一步 本地安装Redis 服务 关于redis的教程链接 点击这里: ...

  10. 2019-7-29-asp-dotnet-core-从-Frp-获取用户真实-IP-地址

    title author date CreateTime categories asp dotnet core 从 Frp 获取用户真实 IP 地址 lindexi 2019-07-29 08:28: ...