摘要总结：本文介绍了两个动画示例，第一个示例通过vue.js实现了一个简单的弹出层效果，第二个示例使用vue.js实现了标签页切换的效果。通过这些示例展示了vue.js在动画方面的强大能力，同时也提供了两种实现方式供读者参考。
最近在进行web项目开发过程中，遇到了一个需求，就是需要弹出层可以用鼠标拖动。之前经常做的是弹出一个弹出层来提示用户信息或者是弹出一个弹出层进行登录，缺点是不能根据用户的视觉习惯定位他。下面我来介绍一个方法来解决这个问题。以下方法通过扩展jquery来进行开发。
//$("#testdiv").hoverAlert({message:'弹出内容'});
中间磨磨唧唧从原生JS找到JS插件，浪费了不少精力和时间，但是也磕磕碰碰学到了些知识，建议读者：想学一下弹窗的JS实现代码的可以看看前两小节，只想实现效果的，直接复制源码就行！
我昨天用这个插件的时候也有这个问题，弹出内容大了就居不了中。这是组件不完美的地方，他设置了top和left值，而且是固定的。这种弹出层都是绝对定位的 所以没办法用margin：auto 0神马的居中。解决方案主要两种： 1.修改在浏览器里面调试模式。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/154392.html原文链接：https://javaforall.cn
跟大家分享一下，IntelliJ IDEA 2021 Win 和 Mac 快捷键大全，IDEA 基本所有功能都可以通过快捷键来完成。
最新IDEA全家桶激活码 长期更新：https://docs.qq.com/doc/DS1pwY0h2ZGRGYXl3
上期很多朋友留言说有没有 Mac 版的，现在来了，这篇是整理得比较全的了，建议大家收藏，日后必定有用！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
作者 | Java基基 来源 | https://mp.weixin.qq.com/s/1RqqwZAU5TipmcddS3J_Ug IntelliJ IDEA 2021 Win 和 Mac 快捷键大全，IDEA 基本所有功能都可以通过快捷键来完成。 可以这么说，如果你掌握了所有IDEA的快捷键使用，那么你完全可以丢掉鼠标，而且不影响开发效率。 一、IntelliJ IDEA 快捷键大全 Win 版 一、Ctrl 快捷键 Ctrl + F 在当前文件进行文本查找 （必备） Ctrl + R 在当前文件进行
项目中常常用到搜索，特别是导航类的网站。自己做关键字搜索不太现实，直接调用百度的是最好的选择。 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值，当然$.getScript也可以实现跨域调用js。
最近帮大家整理了一篇 idea 快捷键大全，包含了 win 和 mac 版，文末有高清 PDF 版本，可以打印出来贴在工位上，闲的时候瞅几眼，撸代码的速度将大幅提升。
本文系统的介绍了开发工具 IDEA 的常用操作，从开发过程中的编码，到运行调试，循序渐进；结合实际项目开发，从常用配置、快捷键使用、编码技巧及调试技巧、常用插件等角度，系统介绍如何高效的使用 IDEA 开发项目。
一、事件触发顺序 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown -> mouseup -> click 三步。 手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart -> touchmove -> touchend。 手机
首先先把你所需要弹出的弹出层的HTML写好，这个是必须的，在写好完HTML后就可以把这个模态框先隐藏起来，把display属性设置为none。
最近在项目中进行 WordPress 后台开发的时候，需要制作弹出层，经过一轮测试，发现还是 WordPress 原生已支持的 ThickBox 比较方便。
使用惯了eclipse的朋友，如果刚换成了idea或许有些不习惯。但是使用idea之后，就会love上idea了。本文将通过图文讲解怎么通过idea创建一个spring mvc项目。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>jquery弹出层浮动层代码</title> <script src=”/ajaxjs/jquery1.3.2.js” type=”text/javascript”></script> <style> *{ margin:0; padding:0} body{ margin:0; padding:0; font-size:12px} ul,li{ list-style:none} ul{position:relative;top:-3px; left:-3px;border:1px solid #ccc; background:#fff;} li{height:23px;line-height:23px;cursor:default; padding:0 0 0 10px} li.current{background:#eee} .wrap{ width:158px; background:#eee; position:absolute;} </style> <script type=”text/javascript”> $(function(){ $(“.wrap”).hide(); var objW=$(“.wrap”).width(); var objH=$(“.wrap”).height(); $(document).mousedown(function(e){ var selfX=objW+e.pageX; var selfY=objH+e.pageY var bodyW=document.documentElement.clientWidth+document.documentElement.scrollLeft; var bodyH=document.documentElement.clientHeight+document.documentElement.scrollTop; if(selfX>bodyW && selfY>bodyH){ $(“.wrap”).css({top:(bodyH-objH),left:(bodyW-objW)}).show(); }else if(selfY>bodyH){ $(“.wrap”).css({top:(bodyH-objH),left:e.pageX}).show(); }else if(selfX>bodyW){ $(“.wrap”).css({top:e.pageY,left:(bodyW-objW)}).show(); }else{ $(“.wrap”).css({top:e.pageY,left:e.pageX}).show(); } }) $(“li”).hover(function(){ $(this).addClass(“current”); },function(){ $(this).removeClass(“current”); }).click(function(){ alert($(this).text()) $(this).parent().parent().hide(); }) }) </script> </head> <body> 请按F5刷新，才干看到效果。点击鼠标左键，弹出层，在最右边点击时03
1. Editing (编辑) ---- No. 快捷键 描述 1 Command+Shift+Enter 自动结束代码，行末自动添加分号 2 Command+P 显示方法的参数详情 3 Control+J 快速查看文档 4 Command+鼠标移上去 显示代码简要信息 5 Command+F1 在错误或警告处显示具体描述信息 6 Command+N 声称代码 7 Control+O 覆盖方法(重写父类方法) 8 Control+I 实现方法(实现接口中的方法) 9 Command+Option+T 包围代
本文主要介绍IntelliJ IDEA Mac 常用快捷键，提升开发效率。 1. Editing (编辑) ---- No. 快捷键 描述 1 Command+Shift+Enter 自动结束代码，行末自动添加分号 2 Command+P 显示方法的参数详情 3 Control+J 快速查看文档 4 Command+鼠标移上去 显示代码简要信息 5 Command+F1 在错误或警告处显示具体描述信息 6 Command+N 声称代码 7 Control+O 覆盖方法(重写父类方法) 8 Control+I
offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
jquery的入口函数是在html所有标签都加载后才执行，而JavaScript的window.onload事件是等到所有内容加载完后才执行。
JQuery.BlockUI是众多JQuery插件弹出层中的一个，它小巧（原版16k，压缩后10左右）,容易使用, 功能齐全，支持Iframe，支持Modal，可定制性高也意味他默认谦虚的外表。
Boxy是一个基于JQuery的弹出层插件，它有相对漂亮的外观，功能齐全，支持iframe，支持模式窗口但相对于同样的弹出层插件BlockUI它明显笨重，但使用不那么方便。
React Portals提供了一种将子节点渲染到父组件以外的DOM节点的解决方案，即允许将JSX作为children渲染至DOM的不同部分，最常见用例是子组件需要从视觉上脱离父容器，例如对话框、浮动工具栏、提示信息等。
Array：例如title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意CSS样式
点击 File –> Settings（Ctrl+Alt+S), –> 打开设置对话框， 在左侧的导航框中点击 KeyMap， 然后选择Main menu –> Code –> Completion. 接着需要做两件事
1. 快捷键 2 . PyCharm的常用设置和扩展 --------------------------------------------------------------------------------------------------------------------------------------------------------- Mac键盘符号和修饰键说明 ⌘ Command ⇧ Shift ⌥ Option ⌃ Control ↩︎ Return/Enter ⌫ Delete
Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件。它基于jQuery（zepto）开发，使用非常简单，特点就是：非常好用。
说IDEA对新手来说难，可能其中一个原因就是快捷键组合多而且复杂但是它也很全，基本所有功能都可以通过快捷键来完成，可以这么说，如果你掌握了所有IDEA的快捷键使用，那么你完全可以丢掉鼠标，而且不影响开发效率。
layui弹出层的使用方法：首先引入jQuery1.8以上的任意版本；然后引入laery.js；最后通过“function show(){var a = layer.open({…});}”方式使用laery.open弹出层即可。
1 执行(run) Shift + F10 2 提示补全 (Class Name Completion) alt+/ 3 单行注释 ctrl + / 4 多行注释 ctrl + shift + / 5 Alt + Shift + F 显示添加到收藏夹弹出层 / 添加到收藏夹
IntelliJ IDEA 的便捷操作性，快捷键的功劳占了一大半，对于各个快捷键组合请认真对待。IntelliJ IDEA 本身的设计思维是提倡键盘优先于鼠标的，所以各种快捷键组合层出不穷，对于快捷键设置也有各种支持，对于其他 IDE 的快捷键组合也有预设模板进行支持。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/127575.html原文链接：https://javaforall.cn
Intellij IDEA ctrl 快捷键 介绍 Ctrl + F 在当前文件进行文本查找 （必备） Ctrl + R 在当前文件进行文本替换 （必备） Ctrl + Z 撤销 （必备） Ctrl + Y 删除光标所在行 或 删除选中的行 （必备） Ctrl + X 剪切光标所在行 或 剪切选择内容 Ctrl + C 复制光标所在行 或 复制选择内容 Ctrl + D 复制光标所在行 或 复制选择内容，并把复制内容插入光标位置下面 （必备） Ctrl + W 递进式选择代码块。可选中光标所在的单词或段落，
做项目中遇到一个这样的需求，点击属性菜单节点，出现显示框，显示框的位置随着鼠标点击的位置距离而改变。
Ctrl 快捷键 介绍 Ctrl + F 在当前文件进行文本查找 （必备） Ctrl + R 在当前文件进行文本替换 （必备） Ctrl + Z 撤销 （必备） Ctrl + Y 删除光标所在行 或 删除选中的行 （必备） Ctrl + X 剪切光标所在行 或 剪切选择内容 Ctrl + C 复制光标所在行 或 复制选择内容 Ctrl + D 复制光标所在行 或 复制选择内容，并把复制内容插入光标位置下面 （必备） Ctrl + W 递进式选择代码块。可选中光标所在的单词或段落，连续按会在原有选中的基础上再扩展选中范围 （必备） Ctrl + E 显示最近打开的文件记录列表 （必备） Ctrl + N 根据输入的 类名 查找类文件 （必备） Ctrl + G 在当前文件跳转到指定行处 Ctrl + J 插入自定义动态代码模板 （必备） Ctrl + P 方法参数提示显示 （必备） Ctrl + Q 光标所在的变量 / 类名 / 方法名等上面（也可以在提示补充的时候按），显示文档内容 Ctrl + U 前往当前光标所在的方法的父类的方法 / 接口定义 （必备） Ctrl + B 进入光标所在的方法/变量的接口或是定义处，等效于 Ctrl + 左键单击 （必备） Ctrl + K 版本控制提交项目，需要此项目有加入到版本控制才可用 Ctrl + T 版本控制更新项目，需要此项目有加入到版本控制才可用 Ctrl + H 显示当前类的层次结构 Ctrl + O 选择可重写的方法 Ctrl + I 选择可继承的方法 Ctrl + + 展开代码 Ctrl + - 折叠代码 Ctrl + / 注释光标所在行代码，会根据当前不同文件类型使用不同的注释符号 （必备） Ctrl + [ 移动光标到当前所在代码的花括号开始位置 Ctrl + ] 移动光标到当前所在代码的花括号结束位置 Ctrl + F1 在光标所在的错误代码处显示错误信息 （必备） Ctrl + F3 调转到所选中的词的下一个引用位置 （必备） Ctrl + F4 关闭当前编辑文件 Ctrl + F8 在 Debug 模式下，设置光标当前行为断点，如果当前已经是断点则去掉断点 Ctrl + F9 执行 Make Project 操作 Ctrl + F11 选中文件 / 文件夹，使用助记符设定 / 取消书签 （必备） Ctrl + F12 弹出当前文件结构层，可以在弹出的层上直接输入，进行筛选 Ctrl + Tab 编辑窗口切换，如果在切换的过程又加按上delete，则是关闭对应选中的窗口 Ctrl + End 跳到文件尾 Ctrl + Home 跳到文件头 Ctrl + Space 基础代码补全，默认在 Windows 系统上被输入法占用，需要进行修改，建议修改为 Ctrl + 逗号 （必备） Ctrl + Delete 删除光标后面的单词或是中文句 （必备） Ctrl + BackSpace 删除光标前面的单词或是中文句 （必备） Ctrl + 1,2,3…9 定位到对应数值的书签位置 （必备） Ctrl + 左键单击 在打开的文件标题上，弹出该文件路径 （必备） Ctrl + 光标定位 按 Ctrl 不要松开，会显示光标所在的类信息摘要 Ctrl + 左方向键 光标跳转到当前单词 / 中文句的左侧开头位置 （必备） Ctrl + 右方向键 光标跳转到当前单词 / 中文句的右侧开头位置 （必备） Ctrl + 前方向键 等效于鼠标滚轮向前效果 （必备） Ctrl + 后方向键 等效于鼠标滚轮向后效果 （必备） Alt 快捷键 介绍 Alt + `|显示版本控制常用操作菜单弹出层 （必备） Alt + Q 弹出一个提示，显示当前类的声明 / 上下文信息 Alt + F1 显示当前文件选择目标弹出层，弹出层中有很多目标可以进行选择 （必备） Alt + F2 对于前面页面，显示各类浏览器打开目标选择弹出层 Alt + F3 选中文本，逐个往下查找相同文本，并高亮显示 Alt + F7 查找光标所在的方法 / 变量 / 类被调用的地方 Alt + F8 在 Debug 的状态下，选中对象，弹出可输入计算表达式调试框，查看该输入内容的调试结果 Alt + Home 定位 / 显示到当前文件的 Navigation Bar Alt + Enter IntelliJ IDEA 根据光标所在问题，提供快速修复选择，光标放在的位置不同提示的结果也不同 （必备） Alt + Insert 代码自动生成，如生成对象的 set / get 方法，构造函数，toString() 等 （必备） Alt + 左方向键 切换当前已打开的窗口中的子视图，比如Debug窗口中有Output
Ctrl + D 复制光标所在行 或 复制选择内容，并把复制内容插入光标位置下面 （必备）
参考文章：https://blog.csdn.net/qq_38963960/article/details/89552704
很多互联网的项目应用中，弹出层出现的越来越多，使用YUI3可以快速的实现制作弹出层的效果。
主要有两部分 1、从主窗口传值到弹出层 2、从弹出层传值到主窗口 3、通过session互传 4、通过调用父窗口的函数从而获取到父窗口的值（相反也是可以的）
.shade{width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;z-index: 5000;background: #000;opacity: 0.7;}
注意： 1、弹出层必需放在body里 2、弹出层里面不能再嵌套别的层 3、弹出层出来以后，页面的滚动条会被覆盖
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
