首页 前端知识 模仿jquery的fadeIn、fadeOut、fadeToogle、fadeTo函数,淡入淡出效果挺不错!

模仿jquery的fadeIn、fadeOut、fadeToogle、fadeTo函数,淡入淡出效果挺不错!

2024-04-23 21:04:08 前端知识 前端哥 950 561 我要收藏

speed:执行速度 fast slow 3000等

func:回调函数

*/

function animate(obj,prop,speed,func){

//防止重复动画事件

if(obj.timer) return ;

//定义定时器执行次数和总执行时间

var limit=10,totalTime;

if(typeof speed===‘number’){//如果传入的是

totalTime = speed;

}else if(speed===‘slow’){

totalTime = 600;

}else if(speed===‘fast’){

totalTime = 200;

}else{

totalTime = 400;

}

var time = totalTime/limit;

//获取属性值

function getStyle(obj, prop) {

var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;

return prevComputedStyle[prop];

}

var n=0,cache={},display,primary_cur;//cache用来缓存,省的每次都去dom获取

obj.timer = setInterval(function(){

n++;//执行次数每次递增

for(var p in prop){

if(“display”===p) {

display = prop[“display”];

if(display!==‘none’){

obj.style[‘display’] = display;

}

delete prop[“display”];

continue;

}

//判断是否是可以递增的属性,如果不是则直接让它生效,并从prop中删除,删除后就不用每次任务都执行它

var reg = /^(\d)+(px$)?/;//数字和像素这样的判定为可以递增的属性

if(!reg.test(prop[p])){

obj.style[p] = prop[p];

delete prop[p];

continue;

}

var value,opacityFlag=(p == “opacity”)?true:false;

var cur = 0;

if(cache[p+“_cur”]){//从缓存中取

cur = cache[p+“_cur”];

value = cache[p+“_value”];

}else{

value = prop[p];

if(opacityFlag) {

//如果本来是隐藏的则cur默认就是0

if(getStyle(obj, ‘display’)!==‘none’){

cur = Math.round(parseFloat(getStyle(obj, p)) * 100);

}

} else {

cur = parseInt(getStyle(obj, p));

//处理100px的格式

(typeof value===‘string’) && (value=value.replace(/px$/,“”));

}

primary_cur=cur;

cache[p+“_value”] = value;

}

var incre ;

if(cache[p+‘_increment’]){//如果缓存中有则从中取

incre = cache[p+‘_increment’];

}else{

if(opacityFlag){

incre = (value*100-cur)/limit;//计算每次变化值

}else{

incre = (value-cur)/limit;//计算每次变化值

}

cache[p+‘_increment’]= incre;

}

//缓存起来,这样就不用每次都去dom中获取了。

cache[p+“_cur”] = cur + incre;

if (opacityFlag) {

//obj.style.filter = “alpha(opacity : ‘+(cur + incre)+’ )”;

obj.style.opacity = (cur + incre)/100 ;

}else {

obj.style[p] = cur + incre + “px”;

}

}

//如果达到了最大执行次数,要清除定时器,并执行回调函数

if(n==limit){

if(display===‘none’){

obj.style[‘display’] = ‘none’;

}

//清除定时器

clearInterval(obj.timer);

obj.timer=undefined;

func();

}

},time)

}

var div = document.getElementById(“div”);

var div1 = document.getElementById(“div1”);

/*function do_animate(){

animate(div,{width:‘400px’,height:400,opacity: 0,background:‘red’},2000,function(){

console.log(‘finished’)

});

}*/

/*

obj:dom对象

speed:执行速度 fast slow 3000等

func:回调函数

*/

function fadeOut(obj,speed,func){

animate(obj,{opacity: 0,display:‘none’},speed,func);

}

function fadeIn(obj,speed,func){

animate(obj,{opacity: 1,display:‘block’},speed,func);

}

function fadeToggle(obj,speed,func){

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)

最后

给大家分享一些关于HTML的面试题,有需要的朋友可以戳这里免费领取,先到先得哦。


帮助,可以扫码获取!!(备注:前端)**

最后

给大家分享一些关于HTML的面试题,有需要的朋友可以戳这里免费领取,先到先得哦。

[外链图片转存中…(img-Kkfk199q-1712372750603)]
[外链图片转存中…(img-l8rcUr9a-1712372750604)]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5851.html
标签
评论
发布的文章

JSON加密的看法

2024-05-14 23:05:47

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!