2015.3.12(遮罩层JS模块)

这两天了解了一些前端开发常用的工具和库和框架,有一个疑问,如果大量使用这些现成的框架,会不会导致大材小用呢?就是每一个页面都要加载一遍可能要用的框架和库,但实际上这个页面的实现只会用到一小部分,这样无形中就会拖慢速度或者是造成用户的流量浪费。这种问题要怎么解决呢?  没有开发经验啊,这种优化问题有点想不明白。

今天的练习需要一个可以用于点击图片放大图片以及用于替代系统自带的alert的遮罩层写了如下的js模块。方便在项目中直接调用。

下面是html部分的代码。只是在button的onclick事件中调用了js模块;

下面是JS模块的代码,设置了三个遮罩层,最底下的bottomdiv是一个和屏幕同高同宽的全透明遮罩层,中间的middlediv是一个阴影,和顶部可视的newdiv大小基本一致,只是在定位上略下方一点,可以达到一个阴影的效果。

配色极丑……这里决定要将button替换成a标签,用a:hover来模拟按钮的效果,比自带的button稍微好一点。

日拱一卒,不期速成。

时间: 2024-11-03 21:26:12

2015.3.12(遮罩层JS模块)的相关文章

实现自己自定义的弹框和遮罩层

有的时候我们需要实现属于自己的弹框和弹出框的遮罩层效果,下面我给大家讲一下有javascript实现最简单的属于自己的弹框和弹框遮罩层效果,首先编写遮罩层的javascript,代码如下: 1.遮罩层js: //获得坐标 function getPosition() { var top = document.documentElement.scrollTop; var left = document.documentElement.scrollLeft; var height = documen

js关于弹也遮罩层

1:什么是遮罩层 遮罩层:我是弹也一个 遮罩还有一个层,下面上图片看一效果 我们看到一个灰蒙蒙的遮盖(其实也是一个层)还有一个层(也就是我们展示的内容). 2:  弹出层效果居中分析 在这个图片中我们还看到我们弹出的层刚好在中间.下面在上个图看清楚的效果: 如果我们是一个“点”放在中间那么当然是$(window).width()/2,但我们是一个层,它有自已的高度和宽度,如果起始还是从中心点开始,你想它会在居间显示,显然 不对,它们靠右边了,所以我们减去它的高和宽 同是除以2 var posLe

JS遮罩层——如何使被遮罩后的链接可以点击

在遮罩层的使用过程中,发现了一个问题,如果有一个有<a></a>标签链接的HTML页面,如果使用JS遮罩层将此HTML页面遮罩,则此链接无法点击:如果要使此链接可以点击,则需要在<a></a>标签中添加style属性“position:relative;”,例如: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>DIV CS

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效.这组特效共有12种不同的鼠标滑过图片效果,分为滑动.旋转和翻转3大类.它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作. 在线预览   源码下载 使用方法 使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件. <link rel="stylesheet"

自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只能瞎研究了,幸好黑天不负屌丝人,本屌丝终于搞出来了,虽然不尽善尽美,但是功能还是可以用的啦 先附上源码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg&q

【js &amp; jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

刚才在写一个界面,其中为了考虑背景图片的缘故,所以没用Button而是用的a标签 在点击之后应该禁用掉a元素,禁用对于button比较容易,加一个disabled就可以了 但是对于a却没有太好的办法,总不能把href="",更何况我是走的onclick函数 所以百度了一下,然后看到有用遮罩实现的,源代码有bug,然后按照它的思路自己重写了一下 --------- 下面粘一下代码吧,这个遮罩层实现法其实就是在当前元素外wrap一个层,层内增加一个z-index比较大的透明层,直接罩住原来

纯js制作遮罩层对话框 -- g皓皓

//本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> func

JS写出登陆遮罩层+浮动对联广告

用JS写出 遮罩层登陆框 和 对联广告 并自动跟随滚动条 滚动 保持让用户一直可以看到 好了,天色已晚废话不多说,代码特别详细 有注释,请看代码. ================> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml