使用JavaScript触发过渡效果的方法


Posted in Javascript onJanuary 19, 2017

使用 :hover 和 :focus 这样的伪类,我们可以很方便的将元素从一个样式切换到另一个样式,而且切换是会有过渡效果。但有时我们想要使用 js 来驱动过渡(即在代码中触发过渡)也是可以实现的。

和普通过渡一样,先创建两个样式规则,一个是元素的初始状态,一个是过渡结束的状态。然后用 js 在合适的事机修改对应元素的样式即可。

下面以一个日夜景图片切换的样例演示:

使用JavaScript触发过渡效果的方法使用JavaScript触发过渡效果的方法

(1)日景和夜景是两张图片叠在一起的。夜景图初始透明度是0,覆盖在日景图上方。

(2)点击“看夜景”按钮,夜景图透明度逐渐从0过渡到1,看起来画面慢慢变成夜景。

(3)点击“看日景”按钮,夜景图透明度逐渐又从1过渡到0,看起来画面恢复成日景。

在线样例如下:

<!doctype html>
<html lang="en">
<head>
<title>hangge.com</title>
<style>
img {
  position:absolute;
  transition: opacity 5s;
  -webkit-transition: opacity 5s;
}
.solid {
  opacity: 1;
}
.transparent {
  opacity: 0;
}
</style>
<script>
  function toNight(){
      var nightImage = document.getElementById("nightImage");
      nightImage.className = "solid";
  }
  function toDay(){
      var nightImage = document.getElementById("nightImage");
      nightImage.className = "transparent";
  }
</script>
</head>
<body>
  <button onclick="toNight()">看夜景</button>
  <button onclick="toDay()">看日景</button>
  <div>
    <img src="day.png" alt="日景"/>
    <img src="night.png" alt="夜景" id="nightImage" class="transparent"/>
  </div>
</body>
</html>

以上所述是小编给大家介绍的使用JavaScript触发过渡效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
JQuery 学习笔记 选择器之六
Jul 23 Javascript
JQuery 常用操作代码
Mar 14 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
layui实现三级联动效果
Jul 26 Javascript
详解支持Angular 2的表格控件
Jan 19 #Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 #Javascript
JS生成一维码(条形码)功能示例
Jan 19 #Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 #Javascript
javascript中json基础知识详解
Jan 19 #Javascript
JavaScript实现垂直滚动条效果
Jan 18 #Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 #Javascript
You might like
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
js实现抽奖功能
2020/11/24 Javascript
Python中的装饰器用法详解
2015/01/14 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
应届生妇产科护士求职信
2013/10/27 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
2014年销售员工作总结
2014/12/01 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
党支部鉴定意见
2015/06/02 职场文书
MySQL分库分表详情
2021/09/25 MySQL