博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图片跟随鼠标移动
阅读量:6976 次
发布时间:2019-06-27

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

关键点:1.图片采用绝对定位2.事件:mousemove3.偏移距离 offset(),   .offset().left  | .offset().top$("#mem-box-mouse").css({    "left": pointX - $memBox.offset().left - 50,//图片跟随鼠标移动,判断图片在背景区域内的位置 鼠标位置-背景框相对于页面的距离:mouseX - offset().left,    "top": pointY - $memBox.offset().top - 60//offset().top,顶部偏移距离});

  

$(document).ready(function () {//-----------follow mouse movevar the_small_mouse_h_half = 60;//取鼠标图片高度一半var the_small_mouse_w_half = 50;//取鼠标图片宽度一半var $memBox = $("#mem-box-bg");//取鼠标活动的背景框var mem_box_top = $memBox.offset().top + the_small_mouse_h_half;//上var mem_box_left = $memBox.offset().left + the_small_mouse_w_half;//左var mem_box_bottom = $memBox.offset().top + $memBox.height() - the_small_mouse_h_half;//下var mem_box_right = $memBox.offset().left + $memBox.width() - the_small_mouse_w_half;//右$("body").mousemove(function (e) { var pointX = e.pageX;//这里可以得到鼠标X轴坐标 var pointY = e.pageY;//这里可以得到鼠标Y轴坐标 //鼠标活动上下左右活动范围 if (pointX > mem_box_left && pointX < mem_box_right && pointY > mem_box_top && pointY < mem_box_bottom) {  $("#mem-box-mouse").css({   "width": "100px",   "left": pointX - $memBox.offset().left - 50,//mouse - offsetWidth,鼠标图片跟随鼠标移动,判断鼠标图片在背景区域内的位置   "top": pointY - $memBox.offset().top - 60//offset().top,顶部偏移距离  }); }});});

 

转载于:https://www.cnblogs.com/zyjzz/p/6973615.html

你可能感兴趣的文章
做一个项目时遇到中文乱码,于是在入口文件加了个header("Content-type:text/html;charset=utf-8");结果一刷新网页就自动下载本网页文件;...
查看>>
entityframework
查看>>
嵌入式学习第一步:环境搭建
查看>>
【巧妙消维DP】【HDU2059】龟兔赛跑
查看>>
C#中索引器与属性的联系和区别
查看>>
图的定义与术语2 - 数据结构和算法55
查看>>
赛马问题
查看>>
Linux基础入门
查看>>
Nginx 配置文件 nginx.conf 详解
查看>>
make命令
查看>>
sqlserver ceiling函数用法
查看>>
park、unpark、ord 函数使用方法(转)
查看>>
(转)利用 SVG 和 CSS3 实现有趣的边框动画
查看>>
oracle12c安装[INS-30131]异常
查看>>
收藏了一些Notepad++快捷键
查看>>
(转)软件开发和团队”最小模式”初探2-6人模型(上)
查看>>
JavaSE回顾及巩固的自学之路(三)——————所有语言的都存在的基本运算
查看>>
JDBC连接数据库五步
查看>>
HTML-如何让自己的网页标题处可以显示网站的logo?
查看>>
StringBuffer为啥比String快
查看>>