html实现图片淡化效果,图片由模糊变清晰的淡入效果 js+css实现【原创】
网页里,在一些例如栏目、标签、产品展示的地方,如果直接显示图片,会觉得有点平淡,如果图片加点由模糊变清晰、淡入淡出的效果,会大大的增强用户体验。本文将为你介绍一个js+css实现的方法,代码简单易懂,修改起来也很简单。我们先来看看效果吧:
上面就是图片有模糊变清晰的效果。这个效果是由js+css实现的。下面介绍代码:
1、图片代码
这里需要在标签后面加上一个无内容的
2、css代码
.class{
width:468px;height:60px;position:absolute;margin-left:0px;*margin-left:-475px;_margin-left:-475px;margin-top:-60px; *margin-top:-0px;_margin-top:-0px;z-index:888;background:#000;
}
.class1{
filter:alpha(opacity=60);-moz-opacity:0.6;opacity: 0.6
}
.class2{
filter:alpha(opacity=20);-moz-opacity:0.2;opacity: 0.2
}
.class3{
filter:alpha(opacity=10);-moz-opacity:0.1;opacity: 0.1
}
.class4{
filter:alpha(opacity=0);-moz-opacity:0;opacity: 0
}
以上样式将应用到
3、js代码
function show(n){
document.getElementById("div2").className = "class class"+n;
n = parseInt(n) + 1;
if(n <= 2)
ajax_evt = setTimeout("show("+n+")",500);
else if(n <= 3)
ajax_evt = setTimeout("show("+n+")",100);
else
if (ajax_evt) clearTimeout(ajax_evt);
}
js代码是控制
总结
总体来说,这个实现方法是比较简单易懂的,利用层的透明度遮盖图片,实现图片由模糊变清晰的淡入效果。
图片加载由模糊变清晰的效果,其实也可以把图片保存为“渐进式浏览器显示”的格式,这种格式的图片在加载时会先显示图片的轮廓,然后逐渐变得清晰,这个方法估计很多人都没用过吧。看看这里,JPG图片采用“渐进式浏览器显示”格式。
html实现图片淡化效果,图片由模糊变清晰的淡入效果 js+css实现【原创】相关推荐
- Python图片模糊过滤器:让模糊变清晰!
Python图片模糊过滤器:让模糊变清晰! 在图像处理中,模糊图片是一种常见的问题.当我们需要从模糊的图片中提取信息时,模糊会严重影响精度.但是,你不必亲自动手去修复模糊的图片.使用Python的Pi ...
- android 模糊到清晰,Android打开图库中图片为什么从模糊变清晰
1. 有一点要明确,图片要进行显示,首先要先将图片进行decode,然后才能显示 2. 图片decode需要时间,越大的图片,细节越多的图片,那么它decode时间就越长 3. 最笨的做法就是,等图片 ...
- GAN网络图像翻译机:图像复原、模糊变清晰、素描变彩图
贴个文章,记录学习历程 http://www.sohu.com/a/169212360_473283 本文介绍深度学习方法在图像翻译领域的应用,通过实现一个编码解码"图像翻译机"进 ...
- 如何给图片降噪?图片噪点模糊变清晰的方法分享
我们日常出去旅游或者游玩,是肯定离不开拍照的,但是每个人的拍照技术都是不一样的,加上环境.设备等等因素,回家后看到照片也是满满的噪点不太清晰,拍摄的照片由于有这些噪点的存在,画质看起来就会比较模糊,那 ...
- 人工智能Java SDK:超分辨(4倍),可以提升图片的分辨率,模糊变清晰
超分辨(4倍)SDK 提升图片4倍分辨率. SDK功能: 单图片提升 批量图片提升 运行例子 - SuperResolutionExample 测试图片(左侧原图,右侧提升后效果) 运行成功后,命令行 ...
- 图片加载由模糊变清晰-图片优化
开发过程中,一些图片的展示时,加载很慢很久,后来把图片缩放压成缩略图吧,速度是快了但是模糊不清,如何处理这样问题,下面就和大家分享一下自己的处理方法. 先让客户端加载像素小的缩略图: <img ...
- H5 canvas画布 字体图片模糊变清晰
H5 canvas画布 字体图片模糊处理 <canvas id="canvas " width="386px" height="386px&qu ...
- js转换html为图片(html2canvas模糊变清晰)
1.把以下代码存储为html2canvas.js /*html2canvas 0.5.0-beta3 <http://html2canvas.hertzen.com>Copyright ( ...
- 【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片
此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后我本来还想多找几道来做做 ...
最新文章
- 目标检测中的分类和定位冲突问题
- 【es】INDEX_CREATED the shard cannot be allocated to the same node a copy of the shard already
- springboot获取项目路径_springboot学习
- Go实现 爬虫v0.2
- Ubuntu编译:error: ‘usleep’ was not declared in this scope
- 如何手动优化神经网络模型
- HTML CSS 个人网页设计 WEB前端大作业代码
- 告诉你怎么用Python进行企业营运分析!盈利这么多?
- FinTech4Good创始人张晓晨:全球区块链的产业应用趋势
- spring data jpa 动态查询Specification(包括各个In、like、Between等等各种工具类,及完整(分页查询)用法步骤(到返回给前端的结果))
- 群晖Docker容器“failed to initialize logging driver“解决办法
- 2020年中考英语计算机考试,2020年中考英语听说测试考生问答
- java 打印jpg、pdf、word
- 仿京东商城商品分类搜索功能
- 【数据可视化应用】实现空间栅格(附R语言代码)
- python人名查电话(字典)_Python基础练习——使用字典存储电话薄
- 0101 混蛋罗心得[基本元素]
- 现在有一个未分库分表的系统,未来要分库分表,如何设计才可以让系统从未分库分表动态切换到分库分表上?
- GameFramework篇:Network模块案例解读(一:准备工作)
- discuz x3.1 整站搬家换域名攻略