基于CSS3实现淡入(fadeIn)淡出(fadeOut)效果
网上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到目的,但缺点是有轻微的卡顿感,并且运行效率一般。 这里提供另外一个思路,即通过预先定义好的css样式控制图片透明度的过渡, 这种方法过渡平滑,过渡的效果基于css3的animation,所以效率高些。 思路是将淡入,淡出的效果做成预先定义好的样式类,然后用JS改变元素的类来达到图片轮播。(注意:因为是基于CSS3的animation,在移动端做的兼容性测试表现不错,桌面端暂时没有发现太大的问题。但IE对于css的background支持不太好,外链图片有时会有问题。)
基于CSS3淡入淡出效果的图片自动轮播DEMO
关键点在于fadeIn和fadeOut之间的透明度切换:
/* 轮播图片默认的样式*/.bg {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-webkit-transition: opacity 2s linear;-moz-transition: opacity 2s linear;-o-transition: opacity 2s linear;transition: opacity 2s linear;opacity:0;filter:alpha(opacity=0);} .fadein{opacity:100;filter:alpha(opacity=100);}
PS:轮播图片默认透明度为0,设置一个opacity=100名为fadein的类使用JS控制其与默认透明度的切换,本篇博客的轮播方法是自动的一张张切换,并无交互性, 使用触控左右滑动图片的轮播请猛戳俺的另一篇博客:原生JS实现滑动图片轮播
而JS方面则是通过获取imgs数组,轮播其中存放图片的div, 方法是控制图片div的class。
废话不多说,上代码:
HTML(后插入的图片显示在前):
<div id="imgs"><div id="bg1" class="bg"></div><div id="bg2" class="bg"></div>
</div>
CSS:
.bg {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-webkit-transition: opacity 2s linear;-moz-transition: opacity 2s linear;-o-transition: opacity 2s linear;transition: opacity 2s linear;opacity:0;}#bg1 {background: url(http://i1.tietuku.com/7b57a678c8999dbas.jpg) no-repeat;background-size: cover;}#bg2 {background: url(http://i1.tietuku.com/1182f22573e6051fs.jpg) no-repeat;background-size: cover;
}.fadein {opacity: 100;filter: alpha(opacity=100);
}
JS:
// 替换class达到淡入淡出的效果
function fadeIn(e) {e.className = "bg fadein"
};function fadeOut(e) {e.className = "bg"
};
//申明图片数组中当前的轮播图片
cur_img = document.getElementById("imgs").children.length - 1;
//图片轮播函数
function turnImgs(imgs) {var imgs = document.getElementById("imgs").children;if (cur_img == 0) {fadeOut(imgs[cur_img]);cur_img = imgs.length - 1;fadeIn(imgs[cur_img]);} else {fadeOut(imgs[cur_img]);fadeIn(imgs[cur_img - 1]);cur_img--;}}//设置轮播间隔
setInterval(turnImgs, 3000);
demo中只用了两张图片,如果需要插入更多的图片,可以在id=“imgs”的div中加入一个新的子div ,class加上bg即可,然后在CSS中加入该div的描述,比如HTML中加入<div id="bg3" class="bg"></div>
,然后CSS中则加入
#bg3 {background: url(图片地址) no-repeat;background-size: cover;
}
即可。
基于CSS3实现淡入(fadeIn)淡出(fadeOut)效果相关推荐
- jquery hover事件中 fadeIn和fadeOut 效果不能及时停止
$(".nav ul li").hover(function () {var id = $(this).attr("id");$(".nav dl&q ...
- 【HTML5示例代码分享】基于CSS3和jQuery的相片墙效果
一款基于CSS3和jQuery的相片墙,效果非常酷.支持鼠标滚轮退出当前图片. UDE 模拟调试效果图: 附××× 转载于:https://blog.51cto.com/cmccude/1272181
- jQuery fadeIn() 、fadeOut()
一.jQuery fadeIn() 方法 使得一个隐藏的元素淡入视野.首先,元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走):然后,元素逐渐地变得可见.如果元素在页面上已经可见, ...
- 纯JS实现fadeIn 和fadeOut
CSS相关透明度的设置方式 filter:alpha(opacity=50); opacity: 0.5; opacity: 0.5 This is the "most important& ...
- html设计一组图像画廊,基于CSS3的图片画廊的设计与实现
陈纪霞 摘要:CSS3的出现给WEB开发带来了革命性的影响,以前很多需要javascript实现的复杂效果,现在使用简单的CSS3就能实现.该文就利用CSS3实现了一个绚丽的图片画廊效果. 关键词:C ...
- 圆角按钮css,基于CSS3的一组圆角按钮 - YangJunwei
CSS3作为对CSS的升级,将原有的一些大模块分解为更小更易于表达的小模块,取得了相当的好评,也使得开发周期变短.过程变得愉快! 今天分享一下自己使用的基于CSS3的一组圆角按钮,效果不错,但欢迎升级 ...
- an怎么做淡入_淡入与淡出效果
## 1.淡入特效的函数fadeIn() ``` // 1.淡入/渐显 $("#fadeIn").click(function(event) { $("#group1 i ...
- Codrops 教程:基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
- Arctext.js - 基于 CSS3 jQuery 的文本弯曲效果
Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...
最新文章
- 【基础巩固篇】Java 8中对CAS的优化
- The Pediatric Cancer Genome Project 儿童癌症基因组计划
- ue4 改变枢轴位置_【UE4地形】轻松实现UE4自动地貌和自动植被分布
- python编程基础知识体系_Python 编程核心知识体系-基础|数据类型|控制流(一)...
- Ubuntu下Topcoder配置
- 阿里云可以外链mysql_案例详细说明阿里云下设置MySQL远程连接步骤
- 三杯茶(一本令全世界为之动容的书)(Three cups of tea)
- 一段个性化stringgrid的代码
- android 京东白条支付,京东网银钱包安卓版上线:整合京东白条和小金库
- wps文档提取关键词_Cisdem Document Reader5实用文档阅读器
- (2)JavaScript书写语法
- php js后端渲染,webpack后端渲染详解
- 20155315 2016-2017-2 实验二《Java面向对象程序设计》实验报告
- iOS 力学动画生成器UIKit Dynamics 之碰撞效果解说
- 使用阿里云邮件推送服务发送验证码
- 小米笔记本pro lol测试软件,小米笔记本Pro 15增强版游戏性能测评
- azure微软文字转语音工具​AzureTools​使用
- 逃离塔科夫机器码解除,实战解决【100%成功方法】
- qt 部署 错误_QT for Windows安装配置总结及采坑问题汇总
- 字符串分割、切片、替换、去除头尾指定字符