执行fadein追加css,基于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(后插进去的图片显现在前):
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中到场
background: url(图片地点) no-repeat;
background-size: cover;
}
即可。
执行fadein追加css,基于CSS3完成淡入(fadeIn)淡出(fadeOut)结果相关推荐
- 基于CSS3实现淡入(fadeIn)淡出(fadeOut)效果
网上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到目的,但缺点是有轻微的卡顿感,并且运行效率一般. 这里提供另外一个思路,即通过预先定义好的cs ...
- 圆角按钮css,基于CSS3的一组圆角按钮 - YangJunwei
CSS3作为对CSS的升级,将原有的一些大模块分解为更小更易于表达的小模块,取得了相当的好评,也使得开发周期变短.过程变得愉快! 今天分享一下自己使用的基于CSS3的一组圆角按钮,效果不错,但欢迎升级 ...
- css持续淡入淡出,CSS如何使元素淡入然后淡出?
小编典典 使用CSS @keyframes .elementToFadeInAndOut { opacity: 1; animation: fade 2s linear; } @keyframes f ...
- 导航条css代黑色背景代码,基于CSS3实现的黑色个性导航菜单效果
本文实例讲述了基于CSS3实现的黑色个性导航菜单效果.分享给大家供大家参考.具体如下: 黑色个性的CSS3导航菜单,竖直排列的菜单,基本原理与横向的区别并不大,适合学习CSS. 运行效果截图如下: 在 ...
- css可以做什么小船,基于css3小船水面游动动画特效
基于css3小船水面游动动画特效,这是一款色彩鲜艳扁平风格的css3动画特效.效果图如下: 实现的代码. html代码: css代码: * { padding: 0; margin: 0; } bod ...
- Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
- Codrops 优秀教程:基于 CSS3 的全屏网页过渡特效
向大家分享一个来自 Codrops 的基于 CSS3 实现的全屏网页过渡特效.页面初始布局是四个盒子,点击其中一个会扩张到全屏,其它的会淡出隐藏:关闭当前视图的时候又恢复到初始状态. 您可能感兴趣的相 ...
- Codrops 教程:基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
- 和css3实例教程_最好CSS和CSS3教程
和css3实例教程 级联样式表(CSS) (Cascading Style Sheets (CSS)) CSS is an acronym for Cascading Style Sheets. It ...
- 清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...
最新文章
- bwapp之xss(blog)
- CSP认证201509-2	日期计算[C++题解]:枚举、模拟
- Python 类的特性讲解
- 【项目管理】认识沟通管理
- wireshark 常用命令
- 一个基于cocos2d-x 3.0和Box2d的demo小程序
- expect详解及自动登录脚本的实现
- 鬼才!用Python计算圆周率 π
- virtualbox 该内存不能为written_系统提示“该内存不能为read”的原因和解决办法...
- matlab rsdec,MATLAB在RS码实现中的应用
- 页游修改攻击力如何同步服务器,我的世界 怎么修改武器攻击力和属性 像服务器那样!!...
- 区块链环境搭建、环境架构介绍、环境如何用、部署 Chaincode、智能合约的调用
- python怎么画地图空间分异图_中国西南诸河流域东片土壤、植被生态系统的分异...
- Centos无法卸载时处理办法
- 机器学习实践系列之3 - 人脸对齐(上)
- HTML:超文本标记语言
- python文件处理——encoding参数,utf-8,gbk
- 如何将网络上的共享文件映射到本地
- 10个python接私活的平台,整整10个!总有适合你的,你有技术就有钱
- 每日思考第 63 期:物理空间限制精神世界的发展
热门文章
- 嘀嘀的费用是优步的两倍?
- docker 容器健康检查
- 杭州地铁首末站周边停车场正酝酿停车收费优惠
- 计算机服务器加载失败,win10系统打开windows Media player听歌提示“服务器运行失败”的详细步骤...
- 就业季必看的职业规划
- 将dubbo暴露HTTP服务
- 城头土命适合做计算机电脑职业,土命人适合的职业
- 杀毒软件会从哪些方面对计算机进行保护作用(360杀毒软件)
- 走近篮球运动·体育项目
- 服务器装虚拟声卡,虚拟声卡,教您怎么安装虚拟声卡