博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js进阶 12-3 如何实现元素跟随鼠标移动
阅读量:6033 次
发布时间:2019-06-20

本文共 617 字,大约阅读时间需要 2 分钟。

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、代码

    
演示文档

鼠标坐标(mousemove):

 

 

 

 

转载于:https://www.cnblogs.com/Renyi-Fan/p/9263486.html

你可能感兴趣的文章
Java break continue return 的区别
查看>>
算法(Algorithms)第4版 练习 1.3.4
查看>>
jquery easyUI checkbox复选项获取并传后台
查看>>
浅析NopCommerce的多语言方案
查看>>
设计模式之简单工厂模式
查看>>
C++中变量的持续性、链接性和作用域详解
查看>>
2017 4月5日上午
查看>>
Google Chrome开发者工具
查看>>
第一阶段冲刺报告(一)
查看>>
使用crontab调度任务
查看>>
【转载】SQL经验小记
查看>>
zookeeper集群搭建 docker+zk集群搭建
查看>>
Vue2.5笔记:Vue的实例与生命周期
查看>>
论JVM爆炸的几种姿势及自救方法
查看>>
联合体、结构体简析
查看>>
使用throw让服务器端与客户端进行数据交互[Java]
查看>>
java反射与代理
查看>>
深度分析Java的ClassLoader机制(源码级别)
查看>>
微服务架构选Java还是选Go - 多用户负载测试
查看>>
我的友情链接
查看>>