淡入淡出效果的js原生实现
2024-08-24 10:40:43
淡入淡出效果，在日常项目中经常用到，可惜原生JS没有类似的方法，而有时小的页面并不值得引入一个jQuery库，所以就自己写了一个，已封装， 有用得着的朋友， 可以直接使用。 代码中另附有一个设置元素透明度的方法， 是按IE规则(0~100)设置， 若改成标准设置方法(0。00~1。00)， 下面使用时请考虑浮点精确表达差值。 参数说明: fadeIn()与fadeOut()均有三个参数，第一个是事件， 必填; 第二个是淡入淡出速度， 正整数， 大小自己权衡， 可选参数; 第三个， 是指定淡入淡出到的透明度值(类似于jQuery中的fadeTo())， 0~100的正整数值， 也是可选参数。
效果演示
请使用非IE6浏览器，并且等页面加载完毕再测试。
Blog:http://www.nowamagic.net
Welcome to nowamagic.net
Blog:http://www.nowamagic.net
Welcome to nowamagic.net
Blog:http://www.nowamagic.net
Welcome to nowamagic.net
JavaScript代码
window.onload = function(){
//底层共用
var iBase = {
Id: function(name){
return document.getElementById(name);
},
//设置元素透明度,透明度值按IE规则计,即0~100
SetOpacity: function(ev, v){
ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
}
}
//淡入效果(含淡入到指定透明度)
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';
}
})();
}
var btns = iBase.Id('demo').getElementsByTagName('input');
btns[0].onclick = function(){
fadeIn(iBase.Id('fadeIn'));
}
btns[1].onclick = function(){
fadeOut(iBase.Id('fadeOut'),40);
}
btns[2].onclick = function(){
fadeOut(iBase.Id('fadeTo'), 20, 10);
}
}
最新文章
- ABP(现代ASP.NET样板开发框架)系列之13、ABP领域层——数据过滤器（Data filters）
- MUI（5）
- Oracle Database Cloud Services
- English Learning
- acdream 小晴天老师系列——苹果大丰收（DP）
- 用curl做异步操作
- 1.23 确定一个Decimal或Double的整数部分
- Xcode使用source control 时提示the server certificate failed to verify 的解决办法
- docker学习笔记11：Dockerfile 指令 CMD介绍
- http2.0笔记
- IOS 状态栏(UIStatusBar)
- 201521123103 《Java学习笔记》 第九周学习总结
- js 从一个函数中传递值到另一个函数
- Coding theano under remote ubuntu server from local Mac (在本地mac机器上，写、跑、调试、看－远程ubuntu上的theano代码)
- Git从入门到差不多会用
- BZOJ2160拉拉队排练——回文自动机
- 关于vue执行打包后，如何在本地浏览问题
- 【Quartz】问题记录注意事项【四】
- 还没被玩坏的robobrowser(8)——robobrowser的实现原理
- How To Download Youtube Videos Without any software