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 如何实现元素跟随鼠标移动相关推荐

js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代
js进阶 11-16 jquery如何查找元素的父亲.祖先和子代.后代一.总结一句话总结:过滤或者查找的方法里面可以带参数进行进一步的选择. 1.parent()和parents()方法的区别是什 ...
js进阶 10-9 -of-type型子元素伪类选择器
js进阶 10-9 -of-type型子元素伪类选择器一.总结一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...
js进阶 11-8 jquery如何获取元素相对于父元素的位置
js进阶 11-8 jquery如何获取元素相对于父元素的位置一.总结一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...
元素跟随鼠标旋转，未待完续。。。。
本节主要讲的是元素跟随鼠标旋转主要是用到了原生js更改css的transform属性,这个属性下有很多方法,下面就只讲关于本节内容的几种方法,其他的可以私下自己去看一看 translate(x,y) ...
javascript元素跟随鼠标在指定区域运动
元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <h ...
在html上绑定touch,实现html元素跟随touchmove事件的event.touches[0].clientX移动
主要是使用了transform:translateX 实现 newWaterChart * { padding:0; margin:0; -webkit-box-sizing: border-box; ...
实现div在固定区域跟随鼠标移动点击拖动而产生的变化
一.思路 1.在外层增加一个 DIV 容器,并设置好容器的大小.(即:宽和高) 当容器存在边框的时候,由于这里还没找到获取的方法,所以,在容器边框大于 0 的时候,获得的容器的限制区域的坐标会有误差. ...
js-拖拽-div跟随鼠标的拖拽而移动
拖拽: 鼠标按下目标区域---开始拖拽---onmousedown __并列__鼠标移动时候被拖拽的元素跟随鼠标移动-onmousemove _并列_ 当鼠标松开时,被拖拽的元素固定在当前位置onmo ...
js进阶 9-11 select选项框如何动态添加和删除元素
js进阶 9-11 select选项框如何动态添加和删除元素一.总结一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

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

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

一、总结

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

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

2、mousemove的调用对象是谁？

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

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

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

1、相关知识

2、代码

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

最新文章

热门文章