demo---鼠标移入移出效果（jQuery）

最新推荐文章于 2024-04-26 18:01:53 发布

咩有猫腻.

最新推荐文章于 2024-04-26 18:01:53 发布

阅读量395

点赞数 1

分类专栏： demo jQuery 前端后端

本文链接：https://blog.youkuaiyun.com/DcTbnk/article/details/106788231

版权

jQuery 同时被 3 个专栏收录

49 篇文章

订阅专栏

前端后端

45 篇文章

订阅专栏

demo

15 篇文章

订阅专栏

本文介绍了一种使用jQuery插件实现鼠标移入移出元素时，根据鼠标位置判断其进入或离开的方向，并使遮罩层从相应方向出现或消失的网页效果。通过计算鼠标与元素边界距离的最小值来确定方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

html

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>判断鼠标移入移出方向</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .outer {
        width: 400px;
        height: 400px;
        border: 2px solid orange;
        margin: 100px auto;
        overflow: hidden;
        position: relative;
      }
      .outer img {
        width: 400px;
        height: 400px;
      }
      .outer div {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.5;
        display: none;
        line-height: 400px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <img src="timg.jpg" />
      <div class="mask">如果有来生，有没有人爱，我也要努力做一个可爱的人。</div>
    </div>
    <div class="outer">
      <img src="timg.jpg" />
      <div class="mask">如果有来生，有没有人爱，我也要努力做一个可爱的人。</div>
    </div>
    <script
      src="jquery-1.11.0.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script src="jquery.hover.js"></script>
    <script>
      $(function () {
        $(".outer").moveDir();
      });
    </script>
  </body>
</html>

js 第一种写法

;(function ($) {
  $.fn.extend({
    moveDir: function () {
      $(this).hover(
        function (e) {
          var $mask = $(this).find(".mask");
          var disT = $(this).offset().top - e.pageY;
          var disB = disT + $(this).outerHeight();
          var disL = $(this).offset().left - e.pageX;
          var disR = disL + $(this).outerWidth();

          var minVal = Math.min(
            Math.abs(disT),
            Math.abs(disB),
            Math.abs(disL),
            Math.abs(disR)
          );

          switch (minVal) {
            case Math.abs(disT):
              $mask.css({ left: 0, top: "-400px" });
              $mask.show().stop().animate({ top: 0 }, 800);
              break;
            case Math.abs(disB):
              $mask.css({ left: 0, top: "400px" });
              $mask.show().stop().animate({ top: 0 }, 800);
              break;
            case Math.abs(disL):
              $mask.css({ left: "-400px", top: 0 });
              $mask.show().stop().animate({ left: 0 }, 800);
              break;
            case Math.abs(disR):
              $mask.css({ left: "400px", top: 0 });
              $mask.show().stop().animate({ left: 0 }, 800);
          }
        },
        function (e) {
          var $mask = $(this).find(".mask");
          var disT = $(this).offset().top - e.pageY;
          var disB = disT + $(this).outerHeight();
          var disL = $(this).offset().left - e.pageX;
          var disR = disL + $(this).outerWidth();

          var minVal = Math.min(
            Math.abs(disT),
            Math.abs(disB),
            Math.abs(disL),
            Math.abs(disR)
          );

          switch (minVal) {
            case Math.abs(disT):
              $mask.stop().animate({ top: "-400px" }, 800);
              break;
            case Math.abs(disB):
              $mask.stop().animate({ top: "400px" }, 800);
              break;
            case Math.abs(disL):
              $mask.stop().animate({ left: "-400px" }, 800);
              break;
            case Math.abs(disR):
              $mask.stop().animate({ left: "400px" }, 800);
          }
        }
      );
    },
  });
})(jQuery);

js 第二种写法

//正常的进行jQuery插件编写的时候一般性的结构
;(function($){
	//加分号的目的是为了避免其他开发人员编写代码不规范的情况
	//吧代码放到匿名函数里，是为了避免和其他代码发生冲突
	$.fn.extend({
		moveDir:function(){
			var $mask = $(this).find(".mask");//获取遮罩层
			$(this).hover(function(e){
				var disT = $(this).offset().top;
				var disB = disT + $(this).outerHeight();
				var disL = $(this).offset().left;
				var disR = disL + $(this).outerWidth();
				
				var dirT = Math.abs(e.pageY - disT);
				var dirB = Math.abs(e.pageY - disB);
				var dirL = Math.abs(e.pageX - disL);
				var dirR = Math.abs(e.pageX - disR);
				
				var minVal = Math.min(dirT,dirB,dirL,dirR);
				
				//console.log(dirT,dirR,dirB,dirL,minVal);
				
				switch(minVal){
					case dirT:
						$mask.show().css({"left":0,"top":"-400px"})
						.stop().animate({"top":0},500);
						break;
					case dirR:
						$mask.show().css({"top":0,"left":"400px"})
						.stop().animate({"left":0},500);
						break;
					case dirB:
						$mask.show().css({"left":0,"top":"400px"})
						.stop().animate({"top":0},500);
						break;
					case dirL:
						$mask.show().css({"top":0,"left":"-400px"})
						.stop().animate({"left":0},500);
						break;
				}
				
				
			},function(e){
				var disT = $(this).offset().top;
				var disB = disT + $(this).outerHeight();
				var disL = $(this).offset().left;
				var disR = disL + $(this).outerWidth();
				
				var dirT = Math.abs(e.pageY - disT);
				var dirB = Math.abs(e.pageY - disB);
				var dirL = Math.abs(e.pageX - disL);
				var dirR = Math.abs(e.pageX - disR);
				
				var minVal = Math.min(dirT,dirB,dirL,dirR);
				
				switch(minVal){
					case dirT:
						$mask
						.stop().animate({"top":"-400px"},500);
						break;
					case dirR:
						$mask
						.stop().animate({"left":"400px"},500);
						break;
					case dirB:
						$mask
						.stop().animate({"top":"400px"},500);
						break;
					case dirL:
						$mask
						.stop().animate({"left":"-400px"},500);
						break;
				}
				
			})
		}
	})
})(jQuery);