文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Excel实战技巧65： 制作漂亮的用户窗体按钮——当鼠标移动到按钮上时高亮显示

在很多场合，我们都能看到这样的效果，当鼠标移动到某个元素上面时，该元素会变成另外一种颜色，达到强调的效果。...下面，我们来实现当鼠标移动到用户窗体按钮上时，会使用颜色高亮显示，让用户窗体更生动，如下图1所示。 ? 其实，你在图1中看到的按钮并不是用户窗体内置的传统命令按钮，而是使用图像控件来制作的。...本例中，将使用绿色和白色/灰色格式来指示用户是否将鼠标悬停在特定按钮上。下图2是我制作的用于按钮图像的文本框。 ? 这里要注意的是，四个文本框的大小和格式设置都必须完全相同。...复制一个刚才绘制的图像控件，如下图6所示。 ? 这个图像将代码鼠标不在按钮上时的状态。...但是，如果用户将鼠标放置在除这两个按钮之外的其他地方时，我们不希望这两个按钮显示绿色，因此要使用用户窗体的MouseMove事件： Private SubUserForm_MouseMove(ByVal

7.8K20

Chrome 70-71 Live Expression 及 global variable 功能

chrome浏览器是世界上最适合开发人员使用的浏览器的，没有之一。 Live Expression 从 chrome70起，我们可以在控制台上方可以放一个动态表达式，用于实时监控它的值。...下面是一些有用的表达式： document.activeElement 高亮当前focus的node document.querySelector(s) 高亮任意node，参数s是css选择器表达式，相当于在...$0 高亮当前所选中的node $0.parentElement 高亮当前所选中的node的父节点 Store DOM nodes as global variables 我们可以把页面上的某元素节点作为全局变量...image.png console面板中会显示该元素的引用名称，一般是 temp1 temp2。...这个你可以在按钮上点击，移动，甚至按键，会发现一系列的mouse, click等事件 使用 unmonitorEvents(temp1) 停止记录事件。

1.6K40
您找到你想要的搜索结果了吗？
是的
没有找到

postMessage实现跨域通信

例子很简单，页面上两个iframe框架，左侧的可以输入信息，点击确认按钮后，输入的信息可以在右侧的iframe中显示。 您可以狠狠地点击这里：两个iframe之间的跨文档通信demo ?...例如，我们在左侧输入“白静被害”，点击按钮后，右侧就有对应显示，参见下面截图： ?...您可以狠狠地点击这里：不同窗体间的跨文档通信demo ? ? 在现代浏览器下，点击男生或女生按钮（例如点击男生按钮），打开的新页面子啊2秒后显示了对应的通信信息。...demo主页面有个名为message的全局变量，当点击男生按钮的时候，这个变量值变成“我是男生，帅气的男生！”；点击女生按钮则是“我是女生，漂亮的女生！”。...// 创建一个新的 MessageChannel 对象 var mc = new MessageChannel(); // 给父级发送一个端口 window.parent.postMessage('显示页加载完毕

1.5K20

《手把手教你》系列技巧篇（十九）-java+ selenium自动化测试-元素定位大法之By css下卷（详细教程）

中的方法 （1）查找输入框并输入“北京宏哥”，（2）查找“百度一下”按钮，（3）点击“百度一下”按钮。...，按照宏哥在5.2中的方法 （1）查找输入框并输入“北京宏哥”，（2）查找“百度一下”按钮(因为span有好多input，所以宏哥又用了一下id)，（3）点击“百度一下”按钮。...这里面要注意一点的就是在是用Firefox的时候，我的逻辑关系是没有错误的，但是Firefox还是会给我报错element not visible。后来换成chrome浏览器，问题就可以解决。...第三：元素定位到一个鼠标事件后才能进行事件触发的位置上：比如，需要鼠标移动到某个区域，元素才可以显示点击的按钮，如果鼠标离开，则相应的事件也没办法触发。.../[@id='su']](定位到父级元素) 根据兄弟元素定位 span.soutu-btn+input

1.3K30

DOM事件的传播机制

在DOM中，事件是指用户与页面交互时发生的动作，比如点击、鼠标移动等。而事件流则是指这些事件在DOM树中传播的路径。...('click', function() { console.log('按钮被点击');});当我们点击按钮时，控制台会输出以下内容：外层元素被点击 内层元素被点击 按钮被点击可以看到，事件首先在捕获阶段从外层元素开始传播...', function() { console.log('按钮被点击');});当我们点击按钮时，控制台会输出以下内容：按钮被点击 内层元素被点击 外层元素被点击可以看到，事件首先在目标元素上触发，然后在冒泡阶段依次触发父级元素的相同类型事件处理程序...('click', function() { console.log('按钮被点击');});当我们点击按钮时，控制台会输出以下内容：外层元素被点击 内层元素被点击 按钮被点击可以看到，事件首先在捕获阶段依次触发父级元素的相同类型事件处理程序...>列表项1可以看到，通过在父级元素上绑定点击事件处理程序，我们可以捕获到子级元素触发的点击事件，并且可以获取到触发事件的目标元素。

14730

第123天：移动web开发中的常见问题

移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。 解决方案： fastclick可以解决在手机上点击事件的300ms延迟。...在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。...在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类:active的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止： html {...winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉？...，PC端的该属性已经被移除，该属性在移动端要生效，必须设置meta viewport。

1.5K20

【ztree系列】树节点的模糊查询

真佩服我这颗屡试屡换的小心脏啊 一、页面设计 对于搜索功能，首先要有输入框，用于接收输入内容；然后就是显示搜索结果用的标签，控制焦点用的上移下动按钮。...关于搜索结果的显示，刚开始考虑了两种：只显示结果，对于这种，当有搜索结果时我们就看不到树结构了，没有树结构则会显得信息凌乱，所以放弃了这种方式；第二种是高亮所有搜索信息，如果搜索结果所在的父节点是关闭的...ztree的一个函数来得到搜索的结果，并赋给一个数组变量 var lastValue = "", nodeList = [], fontCss = {}; //键盘释放：当输入框的键盘按键被松开时，把查询到的数据结果显示在标签中...，且搜索数量过多时，单纯的高亮搜索结果就不太能满足我们的要求了，所以这里提供了上下移动按钮，且提供标签框来动态的显示搜索结果的数据 //点击向上按钮时，将焦点移向上一条数据 function clickUp...自动展开节点，默认第一个搜索结果呈选中状态；点击上下移动按钮时，树上的焦点自动更换，显示搜索条数比例的标签框中的内容也自动更换。

1.2K30

【实践】Chrome浏览器客户端调试从入门到奔溃

1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态 2.设备图标：点击它可以切换到不同的终端进行开发模式，移动端和...pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择 image 可选择的适配 3.Elements 功能标签页...源文件，方便我们查看和调试，在我还没有走出校园时候，我经常看一些大站的js代码，那时候其实基本都看不懂，但是最起码可以看看人家的代码风格，人家的命名方式，所有的代码都是压缩之后的代码，我们可以点击下面的...以捕获屏幕为例，点击摄像机按钮（捕获屏幕），重新加载页面即可捕获屏幕。 双击其中的截屏可以放大显示，在放大的图下方可以点击跳转到上一帧或者下一帧。...可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）.

3.6K30

12款堪称神器的 Chrome 插件，Max 你的工作效率！

用来记笔记和待办事项的 Google Keep ? 推荐理由： Google Keep 快速，轻便，完全符合快速工作节奏的需求——只需点击浏览器上的按钮即可快速添加笔记。...只要点击工具栏上的按钮或者按 Ctrl/Cmd+Shift+S，你正在浏览的页面就会被加到阅读队列中。有空的时候就可以打开 Pocket 的 web 应用和 APP，在没有其他干扰的情况下阅读。...要知道，信息过载是非常现实的问题，Reedy无疑能帮你弱化信息量。当我被冗长的电子邮件和新闻稿轰炸时，Reedy能让我大致浏览一遍，决定是否得花时间跟进处理。...这个功能不只局限于分享：我后来发现，他能用于在文章或者播客里标记来源。我所作的高亮都被保存下来，可以随时检索，甚至在Pocket和Instapaper账户里得以显示。...Refind的出现就是为了解决这个问题。 他能把书签页保存在云端，你google搜到相关内容时他们也会被高亮出来，妈妈再也不用担心我一篇文章收藏个好多遍啦。

2.9K20

安卓Chrome使用技巧合辑

值得一提的是，在查看源码模式下，自带行号显示和代码高亮功能，超级好用。 　　16....以下内容在发文时的最新版Chrome Dev(59.0.3068.4)上测试通过，由于各版本(Stable/Beta/Dev/Canary)中支持的实验特性存在差异，并且某一实验室特性有可能随着版本更迭被更改..."使网页适合移动设备"的按钮，点击此按钮，Chrome将会对当前网页重新排版为阅读模式。 　　...以下内容在发文时的最新版Chrome Canary(60.0.3077.0)上测试通过，并且可能是Chrome Canary在60+版本上独有的实验性特性: 　　1....，Chrome会在报错页显示一个"稍后下载此网页"的按钮，点击此按钮，Chrome会在后台尝试下载此网页，当网页下载完成后，将会给用户弹出通知。

9.5K30

推荐 12 款堪称神器的插件，提高工作效率必不可少

用来记笔记和待办事项的：Google Keep ? 推荐理由： Google Keep 快速，轻便，完全符合快速工作节奏的需求——只需点击浏览器上的按钮即可快速添加笔记。...只要点击工具栏上的按钮或者按Ctrl/Cmd+Shift+S，你正在浏览的页面就会被加到阅读队列中。有空的时候就可以打开 Pocket 的 web 应用和 APP，在没有其他干扰的情况下阅读。...要知道，信息过载是非常现实的问题，Reedy无疑能帮你弱化信息量。当我被冗长的电子邮件和新闻稿轰炸时，Reedy能让我大致浏览一遍，决定是否得花时间跟进处理。...这个功能不只局限于分享：我后来发现，他能用于在文章或者播客里标记来源。我所作的高亮都被保存下来，可以随时检索，甚至在Pocket和Instapaper账户里得以显示。...他能把书签页保存在云端，你google搜到相关内容时他们也会被高亮出来，妈妈再也不用担心我一篇文章收藏个好多遍啦。

1.7K20

JavaScript—事件

当我们的鼠标点击到窗口上的按钮时，并不是鼠标的箭头真正点击到这个按钮了，而是鼠标发出了一个动作事件，然后这个事件先被传送到了操作系统的命令处理带，然后再传送到负责显示图形的图像数据层，事件到这里后图像数据层会先看哪个程序的窗口在最上面...事件委托： 这其中有一个事件委托的概念，我们需要在代码中把事件委托也可以说是注册到按钮上，这时会有一个监听器监听着这个按钮，当用户点击按钮时就会去调用委托事件中的代码，这些代码都写在函数中。...所以简单来说，就是把一个写好的函数通过事件委托到按钮上，当用户点击按钮后，就会调用那个函数，函数里的代码就会执行。...例如：我把一段打印Hello World的函数，通过事件委托到按钮上，当我点击这个按钮的时候就会调用这个函数，函数执行完之后就会打印Hello World。...当鼠标的光标移动进按钮时会触发mouseover事件，移动出按钮时会触发mousseout事件，然后就会调用委托到事件中的函数代码，函数被调用执行就会在控制台中输出这些信息。

1.5K20

【译】使用 Web Workers 优化 JavaScript 应用程序性能

本文章的项目实例代码可在GitHub上找到。 JavaScript 主线程 JavaScript 是单线程的，这意味着在同一时间只有一段代码能够运行。...可以通过调用 worker 上的 terminate() 方法终止 worker。无论是否正在执行任务，这都会立即终止 worker。worker 也可以在它自己的线程内被终止。...单击第一个按钮时，航天飞机图标应从左向右移动。单击第二个按钮会运行CPU大量计算。...刷新浏览器中的示例程序并点击 Start 来移动这些图片。在它们移动的任何时间，点击 Run calculation 来进行斐波那契计算。...Performance metrics tab 上图中的高亮部分显示了主线程上的活动， 右上角显示一个红色三角形的是点击事件。

1.7K10

Chrome Devtools Performance使用指南

一直点击 Add 10 这个按钮直到你能很明显看到蓝色小方块移动变慢，在性能比较好的机器上，大概要点击20次左右。 点击 Optimize按钮，你会发现蓝色小方块会变的很快而且动画变得平滑。...点击 un-optimize 按钮，蓝色小方块又会变成之前的模样。 记录运行时性能表现 在之前的DEMO中，当你运行优化模式的时候，蓝色小方块移动地非常快。为什么呢？...在DevTools中，点击 Record 。这时候Devtools就开始录制各种性能指标 ? 等待几分钟 点击Stop按钮，Devtools停止录制，处理数据，然后显示性能报告 ?...这篇指南里暂时用不上这个功能。 定位瓶颈 现在已经确定到这个页面的动画性能表现不太好，那么下一步就是找到为什么 注意Summary面板，你会发现CPU花费了大量的时间在rendering上。...注意reveal这个链接，双击它会让高亮触发这个事件的event。如果点击了app.js:94这个链接，就会跳转到对应的代码处。 ? 在app.update这个事件的长条下方，有很多被触发的紫色长条。

2.5K30

【译】W3C WAI-ARIA最佳实践 -- 表单

中，关闭其 menu 和所有打开的父级 menu 容器 + Shift + Tab: 将焦点移动到Tab序列中的上一个元素，并且如果获得焦点的项目不在 menubar 中，关闭其 menu 和所有打开的父级...，那么该 menuitem 被认为是一个父级。...一个子菜单的菜单元素被它的父级 menuitem 包含或拥有。 父级menu的aria-haspopup 设置为 true。...在某些浏览器中，如果没有选中任何一个单选按钮，使用 Shift+ Tab 将焦点移动到单选按钮组，焦点将会被放置在最后一个单选按钮，而不是第一个单选按钮。...例如，在一个设置闹钟的部件中，一个数值调节按钮允许用户在0-59间选择分钟。 数值调节按钮通常有三个组件，包含一个显示当前值的文本框，一个增加按钮，一个减小按钮。

8.2K30

【 iOS 应用开发 】 UIKit 控件 ( UIView 属性 | storyboard 设置 | 模拟器 | 拖线关联 | tag | 软键盘操作 | 颜色值 | 代码生成控件 | 动画设置 )

另外若干个 UIView; 3.父控件 与 子控件 : iOS 的 整个界面是一个 UIView 控件, 该控件是父控件; 该界面中的元素被嵌套在了 父控件 UIView 中, 这些界面中的控件就是...; 4.加法按钮 : 点击按钮, 将用户在 UITextField 输入的字符串转为 int 类型, 相加, 将结果转为字符串显示在 最后一个 UILabel 中; ---- ( 3 ) 界面编辑...; ① 属性左侧的圆圈图示 : 第一张是鼠标没有移动到圆圈上, 第二章是鼠标移动到了圆圈上; ② 建立关联图示 : 打开辅助编辑器, 按住鼠标左键, 拖到 storyboard 中对应的控件上..., 然后点击按下状态时, 大按钮显示另外一个背景图片; 3.上下左右按钮 : 点击四个按钮, 大按钮进行上下左右移动; 4.放大缩小按钮 : 点击放大, 大按钮放大, 点击缩小, 大按钮缩小; -..., 并设置其类型为 定制类型, 不要点上去 高亮状态变为半透明; 设置按钮高亮状态下的属性, 注意在 Control 中的 Content 属性需要勾选 Highlighted 选项才会显示下图的内容

4.7K30

学姐叫我看 CSS 新出的容器查询，然后把公共组件重构成响应式的！

CSS容器查询，一个长期以来被web开发者要求的特性，很快就会出现在CSS中，在最新的 Chrome Canary 中，我们可以通过 chrome://flags/#enable-container-queries...喔或，这是一个很好的问题。 问题是，只有当视口宽度大于特定值时，开发人员才会使用组件的变体。例如，如果我在平板中使用 featured 也就是 PC 的样式，它不能工作，为什么?...当一个组件被放置在一个项中，它就被包含在该项中。这意味着，我们可以查询父元素的宽度并据此修改它。考虑下图 注意，每个卡片都有一个黄色的轮廓线，代表每个组件的父组件。...当我们在设计UI时以这种心态思考时，我们可以开始考虑组件的不同变体，这些组件依赖于它们的父宽度。 在下面的图中，请注意文章组件的每个变化是如何以特定的宽度开始的。...CSS容器查询用例 我们来探索一些可以使用CSS容器查询实现的用例。 聊天列表 我在Facebook messenger上看到了这种模式。聊天列表根据视口宽度改变。

2.2K30

基础篇章：关于 React Native 之 Touchable 系列组件的讲解

但如果手指再次移回范围内，按钮会被再次激活。只要视图不能滚动，你可以来回多次这样的操作。确保你传入一个常量来减少内存分配。...Touchable可触摸，Highlight高亮，所以这个触摸组件的效果是点击会出现高亮的反馈效果。 TouchableHighlight组件用于封装视图，使其可以正确响应用户的触摸操作。...当我们按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过并被用户看到，使得视图变暗或变亮。...，不知道的去看View的style underlayColor 当视图被触摸或者点击时，显示的颜色 效果展示 我们还是拿前面那个Image和ScrollView中使用的例子，只不过我们现在给它加上按压效果...来看看吧，先看效果图，具体代码，我在最后放出来。

1.9K90

基础篇章：关于 React Native 之 Touchable 系列组件的讲解

* onLongPress function 长按组件时调用该方法 * onPress function 当用户点击时被调用 * onPressIn function 当用户开始触摸组件时回调方法 *...但如果手指再次移回范围内，按钮会被再次激活。只要视图不能滚动，你可以来回多次这样的操作。确保你传入一个常量来减少内存分配。...Touchable可触摸，Highlight高亮，所以这个触摸组件的效果是点击会出现高亮的反馈效果。 TouchableHighlight组件用于封装视图，使其可以正确响应用户的触摸操作。...当我们按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过并被用户看到，使得视图变暗或变亮。...，不知道的去看View的style underlayColor 当视图被触摸或者点击时，显示的颜色 效果展示 我们还是拿前面那个Image和ScrollView中使用的例子，只不过我们现在给它加上按压效果

1.5K90
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券