原文:最近很火的图片遮罩层展示页面的实现【前端开发技能必备系列】

以新建的遮罩层显示大图片越来越受到主流网站的认可和重视,现在QQ空间和人人网两大社区都采用了此种方法来展示照片。这种展示照片的方式确实很实用:不用重新打开窗口 点击空白区域自动关闭 背景半透明,突出主题。 我也忍不住学习和模仿一下这种实现,以备不时之需。 由于遮罩层都用js生成,所以html代码就非常简单了: 注意:body标签中的class属性很关键,不要漏掉。。。 然后就是写js了,一步一步来 ...

2012-06-05 09:20 15 6481 推荐指数:

查看详情

图片延迟加载【前端开发技能必备系列

在网上经常会看到一些很长的网页会延迟加载其中的图片,我认为这是一种按需分配的做法,网页只为那些想继续浏览网页的人加载后面的图片,在不影响用户体验的前提下,最大程度地减少服务器负担和流量。目前,主要的购物网站都采用了这种加载方式。今天在一个网友的站里发现一个图片延迟加载的插件,很好用,在这里介绍一下 ...

Mon Jun 18 16:33:00 CST 2012 14 4961
纯CSS实现平滑伸缩的搜索框【前端开发技能必备系列

有个朋友看到一个能伸缩的搜索框,叫我给他做。我到他所说的网站看了一下,马上告诉他:这个能伸缩的框框得用 js 辅助才能实现,要是为了图方便,在页面上调用一个百十来K的js框架,就太不值得了,建议他不要实现这个功能了。但是,今天又看到类似的一个搜索框,仔细扒了代码,才发现,这个伸缩功能只用CSS ...

Fri Jun 01 07:39:00 CST 2012 15 4094
前端页面需要遮罩

遮罩css 点击以后页面不能操作,直到时间结束 效果图 js部分代码 h5部分 第一个div 遮罩,点击事件在下一个div中,自己写逻辑 ...

Fri Apr 19 23:45:00 CST 2019 0 1308
JS实现遮罩展示图片

一、展示 二、代码 遮罩重点在: 1,head中的style css样式、 2,body內的mask显示div、 3,script中的js代码。 4,因为这里使用了一点jquery,所以需要在head中引入jquery ...

Mon Feb 07 00:45:00 CST 2022 0 740
抛砖引玉式炫技:日历图标的纯CSS实现前端开发技能必备系列

今天我介绍采用纯CSS的方式来创建一个日历图标,你可以将其用在博客日志或者其它地方。自己也是学来的,但是效果是图片级的。如题所述,不在炫技,重在抛砖引玉。最终效果如下: 和从前一样,先看DEMO:http://www.paper-rater.com/jian-ce ...

Mon Apr 08 02:56:00 CST 2013 3 2736
利用Math.random做背景图像随机切换【前端开发技能必备系列

你应该见过(尤其是在一个网站的登录页面,比如:人人小站)这样的效果:每次登录的页面背景都是不同的。这说明该页面很有可能启用了背景随机切换的效果。最初见到这种效果的呈现时,觉得比较炫,后来仔细想想,这个用javascript实现起来应该很简单。 先看一下我做的演示吧:http ...

Mon Jun 25 07:25:00 CST 2012 4 2392
前端页面给指定的div添加遮罩,并且带有加载中的小旋转图片

话不多说,先上代码,其实还是比较简单的 其中#id就是你要遮罩的div的id,其中用到的加载中图片:加载中图片 就是这么简单,这里需要注意的事,要进行遮罩的div的样式要这样设置position:relative(切记,否则达不到你想要的效果!) 忘了说了,这里的js代码 ...

Sun Aug 27 09:50:00 CST 2017 3 4441
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM