zoukankan      html  css  js  c++  java
  • 判断两个页面元素是否重叠的算法

    项目背景:

    界面展示为一组零散的图片围绕一张手机屏幕图片。

    客户提出需求为,需要拖动每个零散的图片到手机屏幕图片中并能自动打开相应的页面。

    基于上面的项目需求则需要解决一个问题,即如何判断指定的两张图片是否有重叠。

    核心代码如下:

                    //hotarea为手机屏幕图片的id,即目标元素id

                   //this为当前拖动的图片元素

                    var offset_target = $("#hotarea").position();
                    var target_width = $("#hotarea").width();
                    var target_height = $("#hotarea").height();

                    var offset_c = $(this).position();
                    var c_width = $(this).width();
                    var c_height = $(this).height();

                   //判断x坐标是否有重合,需考虑元素宽度
                    var xmerge = judgemerge(offset_target.left, offset_target.left + target_width, offset_c.left, offset_c.left + c_width);
                    //判断y坐标是否有重合,需考虑元素高度

                    var ymerge = judgemerge(offset_target.top, offset_target.top + target_height, offset_c.top, offset_c.top + c_height);

                    if (xmerge && ymerge) {

                    //如果x,y坐标都有重合则说明两个元素有重合。

          }

    --------------------------------------------------------------------------------------------------------

           //判断重叠算法,需传入目标元素的x/y坐标范围及当前元素x/y坐标范围
            function judgemerge(target_min, target_max, c_min, c_max) {
                if (c_min > target_min && c_min < target_max) {//最小值是否在目标元素坐标范围内
                    return true;
                } else if (c_max > target_min && c_max < target_max) {//最大值是否在目标元素坐标范围内
                    return true;
                } else if (c_min < target_min && c_min < target_max && c_max > target_min && c_max > target_max) {

                   //当前元素坐标范围是否包含目标元素坐标范围
                    return true;
                } else {
                    return false;
                }
            }


                  

  • 相关阅读:
    dispatchEvent 的应用
    sql语句中日期时间格式化查询
    Dotfuscator Professional Edition 4.9.7500.9484 混淆工具破解版+使用教程
    多表链接 Left join
    多线程计时器
    C#数据库事务原理及实践
    用户sa 登录失败。原因: 该帐户的密码必须更改 sql2008
    Application.DoEvents()和多线程
    C#中DataSet和DataReader的区别
    ROW_NUMBER() OVER函数的基本用法
  • 原文地址:https://www.cnblogs.com/zxh0208/p/3600044.html
Copyright © 2011-2022 走看看