原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

发布时间:2023-05-06 09:47:53

淡入淡出效果在日常项目中经常使用。不幸的是,本地JS没有类似的方法,有时小页面不值得引入jquery库,所以我自己写了一个,包装了, 有用的朋友, 可直接使用. 另一种方法是在代码中设置元素透明度, 按IE规则(0~100)设置, 若改为标准设置方法(0.00~1.00), 请考虑浮点在下面使用时准确表示差值。参数说明:fadeIn()和fadeout()有三个参数,第一个是事件, 必填; 二是淡入淡出速度, 正整数, 权衡大小, 可选参数; 第三个, 指定淡入淡出的透明度值(类似于jquery中的fadeto()), 0~100的正整值, 也是可选参数.核心代码及演示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1//DTD/xhtml1-transitional.dtd"><html xmlns="https://www.tulingxueyuan.cn/d/file/p/20230506/ug3ubuasie4" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>原生JS淡化淡化效果</title><style>/*demo css*/#demo p.box {float:left;width:31%;margin:0 1%}#demo p.box h2{margin-bottom:10px}#demo p.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder}#demo p.box p{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden}</style><script>/** * @author Mr.Think * @author blog https://www.tulingxueyuan.cn/d/file/p/20230506/hkkqlsknwvw * @2011.01.27 * 可自由转载使用,但请注明版权所有权 */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);    }    }</script></head><body><!--DEMO start--><p id="demo"><p class="box"><h2><input type="button" value=“点击淡入” /></h2><p id="fadeIn" style="display:none"><p>Name:Mr.Think</p><p>Blog:http://mrthink.net</p><p>Date:2011.01.27</p></p><p>渴望文明的幸福,必须经历文明的痛苦.</p></p><p class="box"><h2><input type="button" value=“点击淡出” /></h2><p id="fadeOut"><p>Name:Mr.Think</p><p>Blog:http://mrthink.net</p><p>Date:2011.01.27</p></p><p>渴望文明的幸福,必须经历文明的痛苦.</p></p><p class="box"><h2><input type="button" value=“点击淡出至指定透明度” /></h2><p id="fadeTo"><p>Name:Mr.Think</p><p>Blog:http://mrthink.net</p><p>Date:2011.01.27</p></p><p>渴望文明的幸福,必须经历文明的痛苦.</p></p></p><!--DEMO end--></body></html>

上一篇 线上FullGC问题排查实践——手把手教你排查线上问题 | 京东云技术团队
下一篇 Python 3 教程一:入门

文章素材均来源于网络,如有侵权,请联系管理员删除。

标签: Java教程Java基础Java编程技巧面试题Java面试题