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,顶部偏移距离
    });
    

      

    $(document).ready(function () {
    //-----------follow mouse move
    var 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,顶部偏移距离
      });
     }
    });
    });
  • 相关阅读:
    maven surefire入门
    编译原理随笔4(自下而上的语法分析-递归法)
    编译原理随笔3(自上而下的语法分析-推导法)
    编译原理随笔1
    LeetCode刷题笔记-DP算法-取数问题
    算法刷题笔记-stack-四则运算
    LeetCode刷题笔记-递归-反转二叉树
    Beta里程碑总结
    评价cnblogs.com的用户体验
    我们的团队目标
  • 原文地址:https://www.cnblogs.com/zyjzz/p/6973615.html
Copyright © 2011-2022 走看看