<!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. Mac OS 快速查询技巧

    今天不知道按到什么快捷键弹出了这个搜索框,试了试很强大 后来查了才知道要双击键盘上的key (⌘)就会弹出,这个搜索很强大,要先安装QQ,QQ自带的 版权声明:本文为博主原创文章,未经博主允许不得转载 ...

  2. Socket心跳包异常检测的C语言实现，服务器与客户端代码案例

    在Socket心跳机制中,心跳包可以由服务器发送给客户端,也可以由客户端发送给服务器,不过比较起来,前者开销可能较大.本文实现的是由客户端给服务器发送心跳包,服务器不必返回应答包,而是通过判断客户在线 ...

  3. STM32F427VI 电流

  4. 厉害了，Spring Cloud Alibaba 发布 GA 版本！

    ? 小马哥 & Josh Long ? 喜欢写一首诗一般的代码,更喜欢和你共同 code review,英雄的相惜,犹如时间沉淀下来的对话,历久方弥新. 相见如故,@杭州. 4 月 18 日, ...

  5. Flask-session用法

    概念 flask-session是flask框架的session组件,由于原来flask内置session使用签名cookie保存,该组件则将支持session保存到多个地方,如: * redis:保 ...

  6. css3的选择器

    先来做一下准备工作 页面的效果: 看到上面的框框了吗?我们就是通过给这些框框添加背景色的方式,来让大家,了解css3的选择器的效果,下面正式开始: 关联选择器 E1~E2 选择 E1 后面的兄弟 E2 ...

  7. mysql的双主模式

    mysql主主复制配置 server1 ip:192.168.0.231server2 ip:192.168.0.234 更改两台主机的mysql配置文件vim /etc/my.cnfserver1添 ...

  8. 【模板篇】k短路 SDOI2010 魔法猪学院

    题目传送门 吐槽时间 题目分析 代码 题目の传送门 都成了一道模板题了OvO ============================================================= ...

  9. python库之mlxtend

    一.安装 conda install mlxtend --channel conda-forge 具体请看参考文献一 二.入门例子 请看参考文献2上github的举例 参考文献 http://rasb ...

  10. indexof方法区分大小写

    1)全部转换为大写:str.toUpperCase().IndexOf(s.toUpperCase()) 2)全部转换为小写:str.toLowerCase().IndexOf(s.toLowerCa ...