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. PatentTips - Control register access virtualization performance improvement

    BACKGROUND OF THE INVENTION A conventional virtual-machine monitor (VMM) typically runs on a compute ...

  2. 洛谷——P2695 骑士的工作

    https://www.luogu.org/problem/show?pid=2695 题目背景 你作为一个村的村长,保卫村庄是理所当然的了.今天,村庄里来了一只恶龙,他有n个头,恶龙到处杀人放火.你 ...

  3. Maven实战（五）——自己主动化Web应用集成測试

    自己主动化集成測试的角色 本专栏的上一篇文章讲述了Maven与持续集成的一些关系及详细实践,我们都知道,自己主动化測试是持续集成不可缺少的一部分,基本上,没有自己主动化測试的持续集成,都非常难称之为真 ...

  4. 如何创建Hiren的BootCD USB磁盘 -- 制作U盘启动盘

    如何创建Hiren的BootCD USB磁盘 原文 https://www.wintips.org/how-to-create-hirens-bootcd-usb-disk/  本文基本是谷歌翻译 H ...

  5. 2.2 Consumer API官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 2.2 Consumer API 2.2.消费者API 随着0..0版本,我们已经增 ...

  6. Day4上午解题报告

    预计分数:50 +0+0=50 实际分数:50+0+10=60 毒瘤出题人,T3不给暴力分 (* ￣︿￣) T1 https://www.luogu.org/problem/show?pid=T155 ...

  7. jqXHR对象

    //$.ajax()返回的对象就是jqXHR对象 var jqXHR = $.ajax({ type:'post', url:'test.php', data:$('form').serialize( ...

  8. SSO单点登录学习总结（2）——基于Cookie+fliter单点登录实例

    1.使用Cookie解决单点登录 技术点: 1.设置Cookie的路径为setPath("/").即Tomcat的目录下都有效 2.设置Cookie的域setDomain(&quo ...

  9. Nodejs源代码分析之Path

    今天介绍一下nodejs Path的源代码分析,Path的API文档在https://nodejs.org/dist/latest-v5.x/docs/api/path.html,使用相对简单,在AP ...

  10. [Node & Testing] Intergration Testing with Node Express

    We have express app: import _ from 'lodash' import faker from 'faker' import express from 'express' ...