原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
2024-09-04 18:47:15
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00), 下面使用时请考虑浮点精确表达差值. 参数说明: fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, 大小自己权衡, 可选参数; 第三个, 是指定淡入淡出到的透明度值(类似于jQuery中的fadeTo()), 0~100的正整数值, 也是可选参数. 核心代码及演示: 查看样例演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
//淡入效果(含淡入到指定透明度) function fadeIn(elem, speed, opacity){ /* * 参数说明 * elem==>需要淡入的元素 * speed==>淡入速度,正整数(可选) * opacity==>淡入到指定的透明度,0~100(可选) */ speed = speed || 20; opacity = opacity || 100; //显示元素,并将元素值为0透明度(不可见) elem.style.display = 'block' ; iBase.SetOpacity(elem, 0); //初始化透明度变化值为0 var val = 0; //循环将透明值以5递增,即淡入效果 ( function (){ iBase.SetOpacity(elem, val); val += 5; if (val <= opacity) { setTimeout(arguments.callee, speed) } })(); } //淡出效果(含淡出到指定透明度) function fadeOut(elem, speed, opacity){ /* * 参数说明 * elem==>需要淡入的元素 * speed==>淡入速度,正整数(可选) * opacity==>淡入到指定的透明度,0~100(可选) */ speed = speed || 20; opacity = opacity || 0; //初始化透明度变化值为0 var val = 100; //循环将透明值以5递减,即淡出效果 ( function (){ iBase.SetOpacity(elem, val); val -= 5; if (val >= opacity) { setTimeout(arguments.callee, speed); } else if (val < 0) { //元素透明度为0后隐藏元素 elem.style.display = 'none' ; } })(); } |
原文转载自Mr.Think的博客: http://mrthink.net/js-fadein-fadeout-fadeto/,转载请注明.
最新文章
- 你还没成为Delphi QC的成员吗?(转红鱼儿)
- iOS---内存优化
- 在Windows下编写并运行第一个ASP.NET 5 Preview Web API程序
- 读convolutional Neural Networks Applied to House Numbers Digit Classification 的收获。
- php中的性能挖掘
- merge into update
- WCF学习笔记 -- 基本概念
- js调用.net后台事件,和后台调用前台等方法以及js调用服务器控件的方法
- SolrCloud初识
- today reading notes
- POJ 1611 The Suspects(简单并查集)
- 关于微信分享JSSDK使用需注意的几点问题
- vue vuex vue-rouert后台项目——权限路由(超详细简单版)
- dpkg: error: -i (--install) 和 -i (--install) 两个操作之间有矛盾
- Keepalive配置说明
- 没有内涵段子可以刷了,利用Python爬取段友之家贴吧图片和小视频(含源码)
- SwingWorker
- 【读书笔记】iOS-网络-运行循环
- drupal7 的核心模块
- 初识Spring Webflux
热门文章
- 嵌入式开发之qt socket--- qt 封装的socket demo
- 走进Struts2(五)— 值栈和OGNL
- 并发检测主机ip存活脚本
- Mockito when(...).thenReturn(...)和doReturn(...).when(...)的区别
- 让WebRTC支持H264编解码
- 【BZOJ2081】[Poi2010]Beads hash+调和级数
- EasyNVR无插件直播服务器软件使用详情功能-通道配置Excel
- Android笔记之WebView加载网页的进度回调
- Linux c编程:线程属性
- Tensorflow 初级教程(一)