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");}}}
js菜单自适应的实现相关推荐
- 分享111个JS菜单导航,总有一款适合您
分享111个JS菜单导航,总有一款适合您 111个JS菜单导航下载链接:https://pan.baidu.com/s/1WkrSIyHC5JySwrCTL0sgLA?pwd=13yx 提取码:13 ...
- php 伸展菜单代码,上下伸展的JS菜单
上下伸展的JS菜单_网页代码站(www.webdm.cn) #con div{height:98px; width:50px; margin:0 5px 0 5px;float:left;} CSS特 ...
- 分享113个JS菜单导航,总有一款适合您
分享113个JS菜单导航,总有一款适合您 113个JS菜单导航下载链接:https://pan.baidu.com/s/1d4nnh-UAxNnSp9kfMBmPAw?pwd=cw23 提取码:cw ...
- 分享77个JS菜单导航,总有一款适合您
分享77个JS菜单导航,总有一款适合您 77个JS菜单导航下载链接:https://pan.baidu.com/s/1e_384_1KC2oSTDy7AaD3og?pwd=zkw6 提取码:zkw6 ...
- 分享112个JS菜单导航,总有一款适合您
分享112个JS菜单导航,总有一款适合您 112个JS菜单导航下载链接:https://pan.baidu.com/s/1Dm73d2snbu15hZErJjTXxg?pwd=fz1c 提取码:fz ...
- js页面自适应屏幕大小_移动端自适应布局方法的calc()与vw
前端人员在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不 ...
- 效果直逼flash的Div+Css+Js菜单
http://www.dzhai.com/blog/article.asp?id=153 <html> <head> <meta http-equiv="Con ...
- js页面自适应屏幕大小_Web页面适配移动端方案研究
源宝导读:由于我们ERP目前大都是在在PC上面运行,大家现在关注移动端比较少,谈到移动端适配时,可能都有些生疏也可能比较好奇.以前做过一些移动端的little项目,那么借助这次分享的机会,和大家一起讨 ...
- web前端期末大作业 HTML+CSS+JavaScript---介绍自己的家乡-宁夏js菜单下拉
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 家乡旅游景点 | 家乡民生变化 | 介绍自己的家乡 | 我的家 ...
最新文章
- MyBatis常规CURD详解及拓展~
- (C++)设计一个程序能计算一个日期加上若干天后是什么日期and计算日期差值
- 最简单也最难——怎样获取到Android控件的高度
- tomcat无法正常关闭问题分析及解决
- git设置和取消代理
- python官网下载步骤linux-Linux 安装python3.x步骤
- 下列数据类型中python不支持的是_ 下列选项中 ,Python 不支持的数据类型有 ( ) 。_学小易找答案...
- Web前端工作笔记003---Javascript 解决IE8不支持filter、map的方法
- SOA面向服务架构简述
- C++ STL 文件内容的显示和追加
- Uvalive - 3026 Period (kmp求字符串的最小循环节+最大重复次数)
- IE的@cc_on条件编译
- python时间序列预测不连续怎么办_用Python处理非平稳时间序列攻略
- hibernate历史版本下载
- 最新版CAD都有些啥功能(下)
- Linux和Windows双系统gpt,Windows+Ubuntu双系统GPTMBR引导设置
- Combo Box 组合框
- MATLAB 赋值具有的非单一 rhs 维度多于非单一下标数
- 集成科大讯飞语音合成
- 智伴机器人三级分销模式_三级分销系统的模式有哪些
热门文章
- jenkins svn/git sonarqube scanner 代码集成测试
- Android 自定义带图标Toast,工具方法,Toast自定义显示时间
- beetl 时间输出格式化
- php额拍戏,像这种会演戏的演员,给我焊在剧组365天拍戏可以吗?
- 【移植Linux 3.4.2内核第一步】之简单修改
- jz2440开发板修改UBOOT支持NAND FLASH
- (68)zabbix windows性能计数器使用详解
- ES6模块的import和export用法总结
- CruiseControl.NET与TFS结合的配置文件
- Android项目实战视频教程_快递轨迹查询应用开发