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. chsh---更换登录系统时使用的shell

    chsh命令   chsh命令用来更换登录系统时使用的shell.若不指定任何参数与用户名称,则chsh会以应答的方式进行设置. 语法 chsh(选项)(参数) 选项 -s<shell 名称&g ...

  2. java初探秘之推断输入的一串字符是否全为小写字母

    import java.io.IOException; import java.util.*; public class Two { public static void main(String[] ...

  3. Android开发经验之获取画在画布上的字符串长度、宽度（所占像素宽度)

    Android中获取字符串长度.宽度(所占像素宽度) 计算出当前绘制出来的字符串有多宽,可以这么来! 方法1: Paint paint = new Paint(); Rect rect = new R ...

  4. index action分析

    上一篇从结构上分析了action的,本篇将以index action为例仔分析一下action的实现方式. 再概括一下action的作用:对于每种功能(如index)action都会包括两个基本的类* ...

  5. 19.Node.js EventEmitter

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. Node.js里 ...

  6. DG观察日志传输

    --primary端查询v$archived_log视图,确认日志是否被应用:   set lines 300 pages 300 col name for a20 select name,dest_ ...

  7. C#打印日志的小技巧（转）

    https://www.cnblogs.com/jqg-aliang/p/5234206.html 打印日志的函数 开发中输出日志必不可少,在C#中输出多个不同类型参数的时候,需要连接符累加输出,很是 ...

  8. 设计模式六大原则(一)：单一职责原则(Single Responsibility Principle)

    单一职责(SRP)定义: 不要存在多于一个导致类变更的原因,通俗的说,即一个类只负责一项职责. 问题由来: 类T负责两个不同的职责:职责P1,职责P2.当由于职责P1需求发生改变而需要修改类T时,有可 ...

  9. C# winform利用反射和自定义特性加载功能模块(插件式开发)

    由于在实际的工作中, 碰见这样的一个问题: 一个软件, 销售给A客户 他需要所有功能, 但是销售给B客户, 他只需要其中的一部分, 1.如果我们在实际的开发过程中, 没有把一些功能模块区分开来的话, ...

  10. 非极大值抑制（non-maximum suppression）的理解与实现

    非极大抑制(Non-Maximum Suppression) Non-Maximum Suppression for Object Detection in Python RCNN 和微软提出的 SP ...