js进阶 12-3 如何实现元素跟随鼠标移动

一、总结

一句话总结：获取鼠标位置，将鼠标位置设置为元素偏移即可。

1、用什么事件获取鼠标位置？

用mousemove可以获取鼠标移动的时候的位置

        $(document).mousemove(function(e){

2、mousemove的调用对象是谁？

想知道在哪个里面动，就调谁，这里是document

        $(document).mousemove(function(e){

3、如何获取鼠标的具体坐标？

event对象的pageX和pageY属性

        $(document).mousemove(function(e){

            //event.pageX/event.pageY鼠标相对于文档的坐标位置。

            var x=e.pageX+'px';

            var y=e.pageY+'px';

            $('#txt').val(x+' '+y)

4、动态测试变量的值用什么方法好？

将值动态的显示在标签中，就像示例一样。

二、如何实现元素跟随鼠标移动

1、相关知识

  • mousemove() 当鼠标指针在指定的元素中移动时触发。

2、代码

<!DOCTYPE html>

<html lang="en">

<style>

</style>

<head>

    <meta charset="UTF-8">

    <title>演示文档</title>

    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

    <style type="text/css">

        #div1{width: 100px;height: 100px;background: orange;border-radius: 50px;position: absolute;}

    </style>

</style>

</head>

<body>

    <div id="div1"></div>

    <p>鼠标坐标(mousemove):<input type="text" id="txt"></p>

    <script type="text/javascript">

        $(document).mousemove(function(e){

            //event.pageX/event.pageY鼠标相对于文档的坐标位置。

            var x=e.pageX+'px';

            var y=e.pageY+'px';

            $('#txt').val(x+' '+y)

            $("#div1").css({

                'left':x,

                'top':y

            })

        })

    </script>

</body>

</html>
 

js进阶 12-3 如何实现元素跟随鼠标移动的更多相关文章

  1. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  2. js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代

    js进阶 11-16 jquery如何查找元素的父亲.祖先和子代.后代 一.总结 一句话总结:过滤或者查找的方法里面可以带参数进行进一步的选择. 1.parent()和parents()方法的区别是什 ...

  3. js进阶 11-14 jquery如何实现元素的替换和遍历

    js进阶  11-14  jquery如何实现元素的替换和遍历 一.总结 一句话总结:替换:replaceAll() 与 replaceWith().遍历:each(). 1.replaceAll() ...

  4. js进阶 11-13 jquery如何包裹元素和去除元素外的包裹

    js进阶 11-13  jquery如何包裹元素和去除元素外的包裹 一.总结 一句话总结:wrap().wrapAll().unwrap().innerWrap()四个方法 1.jquery中unwr ...

  5. js进阶 11-8 jquery如何获取元素相对于父元素的位置

    js进阶 11-8  jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...

  6. js进阶 10-9 -of-type型子元素伪类选择器

    js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...

  7. javascript元素跟随鼠标在指定区域运动

    元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <h ...

  8. HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现

    对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...

  9. WPF DragDrop事件元素跟随

    前一段时间项目里面要实现一个鼠标拖动一个元素到另外一个元素上面并且赋值的功能,由于要在surface上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...

随机推荐

  1. Python 3 下载安装和环境搭建

    Python3 下载 由于博主使用的平台是Windows10,以下方法仅限win10系统 Python 官网:https://www.python.org/ 找到跟系统相应的版本瞎子: Python ...

  2. 4455: [Zjoi2016]小星星|状压DP|容斥原理

    OrzSDOIR1ak的晨神 能够考虑状压DP枚举子集,求出仅仅保证连通性不保证一一相应的状态下的方案数,然后容斥一下就是终于的答案 #include<algorithm> #includ ...

  3. 20亿与20亿表关联优化方法(超级大表与超级大表join优化方法)

    记得5年前遇到一个SQL.就是一个简单的两表关联.SQL跑了几乎相同一天一夜,这两个表都非常巨大.每一个表都有几十个G.数据量每一个表有20多亿,表的字段也特别多. 相信大家也知道SQL慢在哪里了,单 ...

  4. 关于我遇到的“LNK 2019无法解析的外部符号”的链接错误

    昨天在调试程序的时候出现了"LNK 2019无法解析的外部符号"的问题(VS2008),依照网上说的方法都没有解决这个问题,最后在项目文件里发现有两个同名的可是不在同一个目录下的c ...

  5. VPS搭建与IPv6使用教程

    VPS搭建与IPv6使用教程 SoftEther命令: yum -y install gcc zlib-devel openssl-devel readline-devel ncurses-devel ...

  6. 理性分析 C++(-O2) 和 JS 的性能差距

    laptop: Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz.. Test1: 最后一行:时间(ms) #pragma GCC optimize("O2& ...

  7. Logstash读写性能调整优化

    继续

  8. Linux shell command学习笔记（一）

    Shell的种类有很多种,例如CSH,Bourne Shell,Korn Shell.在现在的大多数Linux发行版中,默认的Shell一般都是Bourne again shell(bash). &l ...

  9. eclipse中导入zico Maven项目

    zico源代码地址:https://github.com/jitlogic/zico 简单的说,git上同步的源代码需要先进行maven编译,然后导入eclipse. 如果没有配置好maven,请参考 ...

  10. 25.Spring @Transactional工作原理

    转自:http://www.importnew.com/12300.html 本文将深入研究Spring的事务管理.主要介绍@Transactional在底层是如何工作的.之后的文章将介绍: prop ...