zoukankan      html  css  js  c++  java
  • 图片跟随鼠标移动

    关键点:

    1.图片采用绝对定位

    2.事件:mousemove

    3.偏移距离 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,顶部偏移距离
    });
     1     <script>
     2 
     3     $(document).ready(function () {
     4 
     5         //-----------mouse move
     6         var the_small_mouse_h_half = 60;//取鼠标图片高度一半
     7         var the_small_mouse_w_half = 50;//取鼠标图片宽度一半
     8         var $memBox = $("#mem-box-bg");//取鼠标活动的背景框
    9 var mem_box_top = $memBox.offset().top + the_small_mouse_h_half;// 10 var mem_box_left = $memBox.offset().left + the_small_mouse_w_half;// 11 var mem_box_bottom = $memBox.offset().top + $memBox.height() - the_small_mouse_h_half;// 12 var mem_box_right = $memBox.offset().left + $memBox.width() - the_small_mouse_w_half;//

    13 $("body").mousemove(function (e) { 14 var pointX = e.pageX;//这里可以得到鼠标X轴坐标 15 var pointY = e.pageY;//这里可以得到鼠标Y轴坐标 16 //鼠标活动上下左右活动范围 17 if (pointX > mem_box_left && pointX < mem_box_right && pointY > mem_box_top && pointY < mem_box_bottom) { 18 $("#mem-box-mouse").css({ 19 "width": "100px", 20 "left": pointX - $memBox.offset().left - 50,//mouse - offsetWidth,鼠标图片跟随鼠标移动,判断鼠标图片在背景区域内的位置 21 "top": pointY - $memBox.offset().top - 60//offset().top,顶部偏移距离 22 }); 23 } 24 }); 25 }); 26 </script>
  • 相关阅读:
    C# WinForm在高分辨率下界面模糊问题的解决
    C# 上传文件 造成内存溢出 解决方法
    C# Linq 交集、并集、差集、去重
    Linux 命令详解./configure、make、make install 命令
    需求分析的方法(二)
    需求分析的方法(一)
    WinDbG工具实践
    windows server 2008 IIS FTP服务器配置采坑
    网站CPU占满,微信经常SSL不能建立的错误排查
    ABP 数据迁移初始化的坑
  • 原文地址:https://www.cnblogs.com/zyjzz/p/4997487.html
Copyright © 2011-2022 走看看