`
caiceclb
  • 浏览: 241973 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

一时灵感之遮罩层妙用

阅读更多

群里一友提出了一个需求: 当保存完一个表单之后 要打印,打印之前表单的数据不能更改,这样得让表单只读,问题还不是一直只读, 如果用户点击一个元素, 则让他触发解除只读状态的方法。

 

表单全部只读?用js捕获事件?遍历表单元素设为只读?表单元素可是多种多样的啊。看着其他人给的答案,我倒是突发奇想,想到了遮罩层。然后仔细想了想,这是个好方法啊,或许也就这次可以马上就想到的解决方案了。

 

灵感来的难得,还是记录下来,以备后忘。仔细拓展一下,貌似这个遮罩的解决方案用的地方绝对是很广泛啊。想想,挺妙的一个想法。

 

用一个和form宽高相同的全透明div绝对定位于form之上,嘿嘿,管他怎么点都不会有反应的。

 

Mark!  Mark!

分享到:
评论

相关推荐

    卫班科技---HTML+CSS遮罩层实现案例

    在IT行业中,网页开发是一项至关重要的技能,而HTML和CSS是构建网页的基础工具。...无论你是初学者还是经验丰富的开发者,都值得深入研究卫班科技的这个遮罩层实现案例,从中汲取灵感并应用于自己的项目之中。

    flash遮罩动画 课件

    当遮罩层上的图形或形状发生变化时,被遮罩层上对应位置的内容也会随之显示或隐藏。简单来说,遮罩层就像是一个透明的模板,只有模板上的部分才能看到被遮罩层的内容。 ### 二、Flash遮罩动画教学目标 1. **理解...

    HTML5 SVG炫酷遮罩层过渡动画效果 6种.zip

    1. 遮罩层(Masking):遮罩层是SVG中一种强大的技术,它允许我们将一部分图像或元素隐藏,从而创建出有趣的效果。通过定义一个遮罩,我们可以指定哪些部分可见,哪些部分不透明。这种技术在创建过渡动画时非常有用...

    遮罩实现纹理动画Flash源文件.rar

    4. **动画效果**:为了实现“花纹一点点展开”的效果,你可以通过编程或在时间轴上手动编辑遮罩层对象的形状或位置,使其随着时间推移发生变化。例如,可能是一片花瓣逐渐打开,或者一个复杂的图案逐渐显现。 5. **...

    鼠标感知方向遮罩代码.rar_鼠标感知方向遮罩代码

    这种效果常常用于提升用户体验,比如在用户滚动或移动鼠标时,遮罩层能够根据鼠标的移动方向动态变化,呈现出更为生动和交互性强的界面。 【描述】中提到的"jQuery鼠标感知方向遮罩代码"是一个轻量级的JavaScript库...

    Android例子源码ListPopupWindow透明遮罩显示隐藏.rar

    在这个例子中,透明遮罩的实现主要是为了给用户一个更好的交互体验,让`ListPopupWindow`在弹出时,背景有一个半透明的遮罩层,防止用户误操作其他部分。透明遮罩的实现通常涉及以下几个步骤: 1. **自定义布局**:...

    500个超全会声会影滤镜遮罩

    总的来说,"500个超全会声会影滤镜遮罩"是会声会影用户的一大福音,它提供了丰富的创意元素,激发用户的创作灵感,让每个视频都能展现出独特的艺术魅力。无论你是视频制作的新手还是资深用户,都可以通过这些资源...

    jQuery图片分割遮罩滑块动画.zip

    遮罩图片通常只显示主图片的一部分,当用户滑动鼠标时,遮罩的位置会发生改变,露出主图片的不同区域。这需要利用jQuery来改变遮罩图片的CSS属性,如left和top,以调整其位置。同时,为了实现平滑的动画效果,可以...

    仿igooge,后台.net

    2. **遮罩层(Mask Layer)**:遮罩层常用于弹出框出现时覆盖整个页面,给用户一个专注的视觉体验,防止他们误操作背景页面。它通常是一个半透明的黑色背景,可以让用户知道当前操作只限于弹出层内。 3. **jQuery ...

    纯css3遮罩弹出模态框代码.zip

    模态框则是在遮罩层之上显示的独立内容区域,用户必须先处理模态框内的信息才能继续与网页的其他部分互动。 这个代码示例中,开发者可能使用了CSS3的选择器、伪类、过渡效果和变换等特性来创建动态的弹出效果。例如...

    Unity 物体遮罩,可用于全景 、AR、效果遮罩

    "微信图片_20210121142808.png"看起来是一个截图,可能展示了使用遮罩效果的实际应用场景或工作流程,尽管无法直接从中获取代码或具体设置,但可以提供直观的参考和灵感。 "Mask_FBX.unitypackage"是一个Unity资源...

    CSS3图片鼠标悬停多种遮罩动画效果 42种.zip

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的视觉效果和交互体验,其中之一就是图片鼠标悬停时的遮罩动画效果。这个"CSS3图片鼠标悬停多种遮罩动画效果 42种.zip"压缩包包含了42种不同的遮罩动画...

    11个html5+css3全屏遮罩导航菜单.zip

    例如,全屏遮罩可能通过设置背景颜色、透明度以及z-index来实现,遮罩层的显示和隐藏可以通过transition属性来平滑过渡。同时,使用@keyframes规则可以创建自定义动画,实现菜单项在鼠标悬停或点击时的动态效果。 ...

    jQuery+CSS3多种不同效果的遮罩弹框插件.zip

    在本插件中,jQuery 可能被用来轻松地创建和控制遮罩层和弹框的显示与隐藏,以及实现弹框的动态效果,如滑动、淡入淡出等。 其次,CSS3 是 Cascading Style Sheets 的最新版本,引入了许多新的样式和动画特性。CSS3...

    安卓进度条loadingprogress相关-这是一款android进度条自定义的控件用到了混合模式进度条覆盖到文字的时候覆盖到哪里哪里变成白色.rar

    为了实现进度条覆盖文字时文字变色的效果,开发者可能使用了遮罩层(Mask Layer)或者遮罩滤镜(Mask Filter),当进度条前进时,遮罩层会改变文字颜色。 此外,由于描述中提到“程序如果跑不起来需要自调”,这...

    8组超炫酷纯CSS3鼠标滑过图片动画效果

    在这个案例中,当鼠标悬停在图片上时,`transition`可以控制遮罩层的出现速度和方式,如淡入淡出、滑动等。 2. **变换(Transform)**: `transform`属性允许元素在空间中进行旋转、缩放、移动和倾斜。在这些动画...

    jQuery实现的带缩略图及对比功能的焦点图插件源码.zip

    这可能通过添加一个可以滑动的遮罩层实现,用户可以通过拖动遮罩层看到两张图片的差异。遮罩层的位置和大小变化可能通过CSS3的`transition`属性实现平滑过渡,而拖动行为可能通过监听鼠标事件和计算偏移量来实现。 ...

    lightbox:一个灯箱画廊,灵感来自史蒂夫·普莱斯无法承受的生命之轻!

    5. **模态窗口**:Lightbox通常以模态窗口形式出现,遮罩层阻止用户与背景页面交互。这需要创建一个覆盖整个屏幕的div,并在需要时将其可见。 6. **键盘导航**:为了增强用户体验,Lightbox往往支持使用键盘的左右...

    4种用法的弹出框浮动层,可拖动.rar

    例如,一种可能的实现是基础的模态弹出框,它在页面中心出现,遮罩层使得用户只能与弹出框进行交互;另一种可能是侧滑式弹出框,从屏幕边缘滑出,节省空间且不影响主要内容的视线。 这些弹出框的可拖动特性是其一大...

    jQuery实现点击按钮弹出可关闭层的浮动层插件

    7. **Z-index**:弹出层和遮罩层通过设置`z-index`属性来控制其在页面中的前后顺序,确保弹出层始终位于其他元素之上。 8. **响应式设计**:通过监听`resize`事件,当窗口大小改变时,可以自动调整遮罩层和弹出层的...

Global site tag (gtag.js) - Google Analytics