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. MySQL具体解释（13）------------事务

    一. 什么是事务 事务就是一段sql 语句的批处理.可是这个批处理是一个atom(原子) .不可切割,要么都运行,要么回滚(rollback)都不运行. 二.为什么出现这样的技术 为什么要使用事务这个 ...

  2. Python: scikit-image gamma and log 对比度调整

    这个函数,主要用来做对比度调整,利用 gamma 曲线 或者 log 函数曲线, gamma 函数的表达式: y=xγ, 其中, x 是输入的像素值,取值范围为 [0−1], y 是输出的像素值,通过 ...

  3. js---BOM 的理解方法

    windows 方法 window.close(); //关闭窗口   window.alert("message"); //弹出一个具有OK按钮的系统消息框,显示指定的文本   ...

  4. jodd-cache集锦

    Jodd cache提供了一组cache的实现,其层次如下: 其中, AbstractCacheMap是一个具有计时和大小的缓存map的默认实现,它的实现类必须: 创建一个新的缓存map. 实现自己的 ...

  5. EPC-9600I-L开发板使用

    1,开发板屏幕,先买的开发板,再买的屏幕,屏幕是7英寸的,与开发板默认烧进的内核不匹配,找板商重新要了匹配的内核,将原内核替换掉,根文件系统和uboot不变,进行重烧. 2,开发板屏幕校准准备 如果校 ...

  6. LAN8720A网络模块的使用问题

    一.LAN8720A模块驱动电路 最近在调试STM32F4驱动LAN8720A网络模块,在做方案前参考是正点原子的LAN8720A的驱动电路方案,但是从网上买回来的LAN8720A模块用正点原子的例程 ...

  7. 【习题 7-3 UVA - 211】The Domino Effect

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每次搜素要往下还是要往右摆. 然后维护一下让每个下标只出现一次就可以了. =>作为剪枝条件 [代码] /* 1.Shoud i ...

  8. [TS] Implement a doubly linked list in TypeScript

    In a doubly linked list each node in the list stores the contents of the node and a pointer or refer ...

  9. cocos2d-x认识之旅

    cocos2d-x 学习历程 1. 了解cocos2d-x.官网 : www.cocos2d-x.org 2. 搭建cocos2d-x. 使用版本号cocos2d-x 3.0 搭建好开发环境教程:ht ...

  10. 修改chrome的安装目录（默认的竟然安装在documents and settings目录，google真不厚道）

    修改chrome的安装目录(默认的竟然安装在documents and settings目录,google真不厚道) 把chrome从系统目录提取出来 Vista下,Win+R运行 C:/Users/ ...