jQuery鼠标跟随事件

今天来看一下鼠标跟随时间，图片随着鼠标的移动而移动
大概思路：

导入一张图片，默认是不跟随的，点击图片后跟随，给图片添加点击事件
编写鼠标移动事件实现图片跟随鼠标移动
- 得到鼠标的坐标值注意：所有页面元素的定位都以左上角为准
- 获得中间的位置 (宽的一半，高的一半)
  源码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标跟随事件</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script><style>img {width: 150px;position: absolute;left: 200px;top: 100px;}</style>
</head>
<body><img src="pic6.jpg">  <!-- 改变图片的left和top值 --><script>var flag = false;  // 默认不跟随$('img').bind('click',function(){  // 点击图片后跟随if (flag) {flag = false;} else {flag = true;}});// mousemove()鼠标移动事件 $("html").bind("mousemove",function(evet){console.log("this is mousemove");if (flag) {// 图片跟随鼠标移动// 得到鼠标的坐标值 【所有页面元素的定位都以左上角为准】var x = event.clientX;var y = event.clientY;// 所有页面元素的定位都以左上角为准,得到图片宽/高的一半就可以获得中间的位置var width = parseInt($("img").css("width"));var height = parseInt($("img").css("height"));console.log(width,height);$("img").css({top: (y - height/2) + 'px',left:(x - width/2) + 'px'});}});</script>
</body>
</html>

jQuery鼠标跟随事件相关推荐

鼠标跟随事件jQuery
穿透石头的水滴,它的力量来源于日积月累. 上一篇博客介绍了jQuery事件,今天用jQuery事件编写一个小案例希望对有需要的小伙伴有所帮助. 鼠标跟随时间图片随着鼠标的移动而移动 <!DO ...
jQuery鼠标移动事件
概念个人理解: jQuery鼠标移动事件是最常用的鼠标事件之一,当用户使用鼠标在指定的元素上移动时即与该元素产生交互,就会触发鼠标移动事件,比如:鼠标在指定元素上移入.移出.悬停等等操作,都属于鼠标 ...
jQuery鼠标悬浮事件
今天学习了鼠标悬浮事件,跟小编来看看吧~ 先来看一下效果: 原本样式: 鼠标悬浮样式: 鼠标离开样式: 源码: <!DOCTYPE html> <html lang="en ...
jquery鼠标悬停事件hover()
在JQuery中提供了.hover()事件,hover的第一个参数(匿名方法)表示mouseenter,第二个参数表示mouseleave,即表示可以为hover传递两个参数.如下代码所示: $( & ...
深入学习jQuery鼠标事件
前面的话鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuery鼠标事件类型鼠标事件共10类,包括click.contextmenu.dblclic ...
html浮动跟随鼠标,jQuery 图片跟随鼠标浮动
不知你有没注意到我的网站首页,上面浮动着一层雪花的背景,并且随着鼠标的移动也在移动着. 本文主要讲述了如何判断鼠标的位置,从而实现图片跟随鼠标进行浮动.为了方便查看和理解,在Demo的左下角把各个参数 ...
js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){$(".weixinTop").show();},function( ...
用鼠标移动事件来实现小鸡跟随
开发工具与关键技术: VS 2019/JS 作者:唐嘉怡撰写时间:2022/4/28 有手吧,有眼睛吧,有脑子吧.那就行了,跟着弄吧. 创建一个新的文件夹用来装载代码和图片 ...
html鼠标经过盒子延时显示,jQuery 鼠标经过(hover)事件的延时处理示例
一.关于鼠标hover事件及延时鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处 ...

jQuery鼠标跟随事件

jQuery鼠标跟随事件相关推荐

最新文章

热门文章