<!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_OBJ_set_font

    #include <uf.h> #include <uf_modl.h> #include <uf_obj.h> UF_initialize(); //创建块 UF ...

  2. 事件绑定addEventListener

    通过addEventListener监听函数实现的dom事件绑定 addEventListener可以为当前dom添加一个事件(这个事件可以是个已有的事件),这就无法避免我们在写代码的时候重复去绑定同 ...

  3. flutter 动态申请权限

    https://pub.flutter-io.cn/packages/permission_handler https://www.jianshu.com/p/fa68876fbdfd 例 Futur ...

  4. Excel的数据分析—排位与百分比

    Excel的数据分析-排位与百分比 某班级期中考试进行后,按照要求仅公布成绩,但学生及家长要求知道排名.故欲公布成绩排名,学生可以通过成绩查询到自己的排名,并同时得到该成绩位于班级百分比排名(即该同学 ...

  5. VS新建工程或者新建项时 出现未定义标识符号

    VS新建工程或者新建项时 出现未定义标识符号,编译之后不影响运行,但是看着很不舒服,影响效率. 解决办法:属性--->VC++目录-->包含目录-->编辑,将自己所用QT的inclu ...

  6. 使用nginx访问本地电脑的目录文件

    cat /usr/local/opt/nginx/ //nginx路径 cd /usr/local/opt/nginx/html //localhost的指向 ln -s ~/Documents do ...

  7. Solrj API读取core 索引库数据

    private static String zkHost = "ip:2181,ip:2181,ip:2181"; private static CloudSolrServer s ...

  8. USACO 2008 January Silver Telephone Lines /// 二分最短路 邻接表dijkstra oj22924

    题目大意: 一共有N (1 ≤ N ≤ 1,000)个电线杆,有P P (1 ≤ P ≤ 10,000)对电线杆是可以连接的, 用几条线连接在一起的电线杆之间都可相互通信,现在想要使得电线杆1和电线杆 ...

  9. android：两个应用之间怎样传值之activity

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/zjh171/article/details/37738579 两个应用之间怎样传值.事实上这个标题太 ...

  10. HTTP请求默认值

    填写后,后面的请求如果对应的未填写,默认使用该参数