js菜单自适应的实现

功能示意图

菜单自适应示意图如下:

对象A可以拖动,缩放。菜单跟随对象A拖动,位置优先级为下面、上面、右边、左边、中间。

这里写图片描述

实现思路

其实菜单放在上下左右中,都是它的left和top在变,我们只要依次计算菜单在下/上/右/左/中时的left和top,以及在这个left和top下,菜单的左\右\上\下边界有没有超出屏幕即可。

实现代码

这段代码依赖于具体环境,是实际工程中拷下来的一段代码:


export default class ToolsBar{/*** 初始化*/init(){this.width = em2px(13.75);    //一级菜单宽度this.height = em2px(2.75);    //一级菜菜单高度this.offsetLeft = em2px(10.083335);    //左边超出宽度this.offsetRight = em2px(1.833335);    //右边超出宽度this.offsetHeight = em2px(5.166665);   //二级菜单的高度}/*** 设置位置* @param rect 立体图形的平面矩形框 {left, top, width, height}*/adjustPosition(rect){let maxWidth = $(document).width();let maxHeight = $(document).height();//left ,top 都是指一级菜单的left和toplet left = rect.left + (rect.width-this.width)/2;let top = rect.top + rect.height;left = left < this.offsetLeft ? this.offsetLeft:left;left = (left + this.width + this.offsetRight ) > maxWidth ? maxWidth - this.width - this.offsetRight:left;//下面放不下,放上面let bottomCanPlace = (top + this.height + this.offsetHeight )  < maxHeight  ;top = bottomCanPlace ? top : rect.top - this.height;// 上面放不了,放右边let topCanPlace = bottomCanPlace || ( top > this.offsetHeight );top = topCanPlace ? top : rect.top + rect.height/2;left = topCanPlace ? left : rect.left + rect.width + this.offsetLeft;//右边放不了,放左边let rightCanPlace = topCanPlace || ( left + this.width + this.offsetRight  < maxWidth );left = rightCanPlace ? left : rect.left -  this.offsetRight - this.width;//左边放不了,放中间let leftCanPlace = rightCanPlace || ( left - this.offsetLeft  > 0 );left = leftCanPlace ? left : maxWidth/2;top = leftCanPlace ? top :  maxHeight/2;this.view.css({left:left,top:top});//在顶部时,二级菜单向上展开if( !bottomCanPlace && topCanPlace ){this.subItemList.addClass("subItemUp");}else{this.subItemList.removeClass("subItemUp");}}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/430006.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python转换为c代码_bash 转换为C代码

bash 转换为C代码,并编译为可执行文件[rootlocalhost ~]# wget http://www.datsi.fi.upm.es/~frosal/sources/shc-3.8.9.tgz[rootlocalhost ~]# tar xvfz shc-3.8.9.tgz[rootlocalhost ~]# cd shc-3.8.9[rootlocalhost shc-3.8.9]# gcc -c shc.c[rootlocalhost shc-3.8.9]# gcc…

promise简析

promise可以解决多个回调函数嵌套问题&#xff0c;将嵌套所表示的流程通过同步的代码更加清晰的表达出来。 promise的用法与使用配置文件很类似&#xff1a;启动异步函数&#xff0c;在then里面配置好异步函数成功或执行失败的回调函数&#xff0c;然后就可以去干别的事了。 …

python cookies过期_Python3中关于cookie的创建与保存

1.cookie的作用cookie 是指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据&#xff0c;就像有些网站上的一些数据是需要登录后才能看得到&#xff0c;那么想抓取某个页面内容&#xff0c;就需要用到cookie来模拟登陆了。在用cookie模拟登陆的时候&…

GIS-004-Cesium版权信息隐藏

.cesium-widget-credits { display: none; } .cesium-viewer .cesium-widget-credits { display: none; }转载于:https://www.cnblogs.com/defineconst/p/5965531.html

webpaper网页出题语言

目的 方便编写web试题&#xff0c;直接使用几个简单的标签&#xff0c;就可以生成一份可以在web上使用&#xff0c;并且可以打印出来的题。 效果预览 考卷打印效果 生成考卷发送给学生&#xff0c;或打印出来线下考 答案卷打印效果&#xff1a; 通过点击”显示答案”生成答…

python教程很详细_Python编程入门教程:从入门到高级,非常详细

本文的资料和内容是我下载的&#xff0c;觉得非常有用&#xff0c;于是转过来大家瞧瞧&#xff1a;这里给初学Python的朋友提供一些建议和指导吧。大神请无视&#xff0c;俗话说&#xff1a;授人以鱼不如授人以渔。所以我这里只是阐述学习过程&#xff0c;并不会直接详细写某个…

NOIP复习资料——往年习题精选

一、计算机系统 1.在以下各项中&#xff0c;&#xff08;&#xff09;不是CPU的组成部分。&#xff08;NOIP2007&#xff09; A&#xff0e;控制器B&#xff0e;运算器C&#xff0e;寄存器D&#xff0e;主板 【答案】D。CPU由控制器、运算器和寄存器组成。 2.在下列各项中…

【笔记】js重写

js重写&#xff0c;以localstorage为例&#xff1a; var originalSetItem localStorage.setItem; localStorage.setItem function(){// 这里做一些额外的事...//继续调用原来的方法originalSetItem.apply(this, arguments); } 代码引自&#xff1a;这里

(中英)作文 —— 标题与小标题

一个押韵的标题&#xff0c;会十分讨巧&#xff1b; 当世界年轻的时候&#xff0c; 当中国年轻的时候&#xff0c;当世界衰老的时候&#xff1b;1. 英文 A year of no significance. An animal of no significance.2. 名著的变形 双城记&#xff1a;A tale of Two cities Tales…

table 表格点击当前行按钮隐藏当前的另一个按钮_Excel表格为什么那么慢已经应该如何解决(四)一类特殊的函数易变函数(volatile function)...

我们&#xff0c;让Excel变简单今天我们把主题聚焦在一类特殊函数造成的问题上——volatile function。这一类函数有人把他们翻译成“易变函数”&#xff0c;其实挺贴切的。本系列其他文章&#xff1a;Excel表格为什么那么慢已经应该如何解决(一)概述Excel表格为什么那么慢已经…

h5 storage事件监听

分析 引用《h5移动web开发指南》上的话&#xff1a; “当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件&#xff0c;就会触发” 所以&#xff0c;localStorage的例子运行需要如下条件&#xff1a; 同一浏览器打开了两个同源页面其中一个网页修…

python工作台_FreeCAD二次开发-创建Python工作台,添加菜单栏和工具条,FreeCAD命令

FreeCAD作为一款基于OpenCasCAD内核的开源CAD软件&#xff0c;可以在GitHub上下载源代码。阅读源代码&#xff0c;有助于我们学习CAD软件架构&#xff0c;了解底层几何算法。由博主Caesar卢尚宇自学整理(纯粹出于对三维CAD软件开发的热爱)内容出自FreeCAD官方社区https://wiki.…

3d照片环效果(修改版--添加了x轴y轴双向转动和修复模糊度的bug)

今天用用前两天总结的css3新效果写了一个3d照片环的效果&#xff0c;其中还有些bug大家可以看一看&#xff0c;一起改进。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><sty…

h5离线应用

h5离线应用 所谓离线应用&#xff0c;就是断网之后还可以运行的应用。h5提供了application cache&#xff0c;可以保存网页的离线数据。CSDN的Markdown编辑器就运用了application cache&#xff0c;在没有网络的情况下&#xff0c;一样可以正常使用&#xff0c;这就是一个很好…

[deviceone开发]-do_RichLabel的简单示例

一、简介 do_RichLabel支持html格式的文本内容&#xff0c;但是只支持部分标签&#xff0c;这个示例列出了一些支持的常用标签&#xff0c;android能支持的标签相对ios更少 二、效果图 三、相关下载 https://github.com/do-project/code4do/tree/master/richlabel_demo 四、相关…

使用rpm包升级ntpd服务_服务器准备升级,小程序将暂停使用

今天说3件事情&#xff1a;一、由于用户增速超出了我们的预期&#xff0c;为确保法助攻小程序的使用体验&#xff0c;我们购买了更高配置的服务器&#xff0c;目前&#xff0c;内部测试已完成&#xff0c;现决定对服务器进行正式升级。服务器升级时间&#xff1a;8月7日(本周五…

重装Nodejs后,webstorm代码报错问题

项描述现象之前没有问题的代码&#xff0c;突然出现很多奇怪的错误原因没有更新webstorm的Nodejs路径设置造成的解决办法重新设置webstorm的Nodejs路径&#xff0c;见下图 重新选择Nodejs安装目录&#xff0c;点击应用

java peek函数_基础篇:JAVA.Stream函数,优雅的数据流操作

写在开头&#xff1a;本文是转载于掘金上的一篇文章&#xff0c;已获得原作者授权&#xff0c;我会在文章最后放上原作者和原文链接。前言平时操作集合数据&#xff0c;我们一般都是for或者iterator去遍历&#xff0c;不是很好看。java提供了Stream的概念&#xff0c;它可以让我…

ESlint静态代码检测工具安装

安装eslint&#xff0c;根目录下执行&#xff1a; F:\my\temp> npm install eslint --save-dev 初始化eslint&#xff0c;会生成一个.eslintrc.js配置文件&#xff0c;执行&#xff1a; F:\my\temp> F:\my\temp\node_modules\.bin\eslint --init 运行&#xff0c;对某…

python随机划分数据集_Python之机器学习-sklearn生成随机数据

sklearn-生成随机数据import numpy as npimport pandas as pdimport matplotlib.pyplot as pltfrom matplotlib.font_manager import FontPropertiesfrom sklearn import datasets%matplotlib inlinefont FontProperties(fname/Library/Fonts/Heiti.ttc)多标签分类数据X1, y1 …