原生js简单实现jQuery的动画效果

偏执的太偏执、 2022-06-03 05:35 152阅读 0赞

// 动画效果
    function startMove(obj,json,fn){
    	clearInterval(obj.timer);
    	var flag = true;
    	obj.timer = setInterval(function(){
    		for(var i in json){
    			// 1.取当前值
    			var oCur = 0;
    			if(i == 'opacity'){
    				oCur = Math.round(parseFloat(getStyle(obj,i))*100);
    			}else{
    				oCur = parseInt(getStyle(obj,i));
    			}
    			// 2.计算速度
    			var speed = (json[i]-oCur)/20;
    			speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
    			console.log(speed)
    			// 3.检测停止
    			if(oCur != json[i]){
    				flag = false;
    			}else{
    				flag = true;
    			}
    			if(i == 'opacity'){
    				curNum = speed + oCur;
    				obj.style.filter = 'alpha(opacity:'+curNum+')';
    				obj.style.opacity = curNum/100;
    			}else{
    				obj.style[i] = oCur + speed +'px';
    			}
    		}
    		if(flag){
    			clearInterval(obj.timer);
    			fn && fn();
    		}
    	},10)
    }
    // 获得css属性值
    function getStyle(obj,attr){
    	if(obj.currentStyle){
    		return obj.currentStyle[attr];
    	}else{
    		return getComputedStyle(obj,false)[attr];
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

相关原生JS实现放大镜效果

1、鼠标经过box的时候显示 mask和bigBox ，当鼠标离开box的时候隐藏mask和bigBox2、当鼠标在盒子中移动的时候，让mask和鼠标一起移动3、当m...

Bertha 。/ 2024年04月28日 13:11/ 0 赞/ 14 阅读

相关原生js实现放大镜效果

今天是中秋佳节，在这了我祝大家中秋快乐，心想事成，工作顺利哈！放大镜效果在电商网站上较为常见的一个效果，主要针对鼠标在图片选取部分放大查看。效果如图所示 ![...

痛定思痛。/ 2024年04月18日 23:23/ 0 赞/ 14 阅读

相关原生js实现点名册效果

话不多说，先上图（GIF那个软件我没有成功下载下来，桑心）： <!DOCTYPE html> <html lang="en"> <head>

痛定思痛。/ 2022年10月01日 05:42/ 0 赞/ 141 阅读

相关 jQuery动画效果

学习要点： 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性在以前很长一段时间里，网页上的

古城微笑少年丶/ 2022年08月18日 15:13/ 0 赞/ 161 阅读

相关 jQuery UI实现动画效果

效果实现描述：页面文档载入后，为第一张图片添加class属性值为img1，为第二张图片添加class属性值img2，为第三张图片添加class属性img3，为第

绝地灬酷狼/ 2022年06月15日 06:16/ 0 赞/ 258 阅读

相关简单原生js实现开关门效果

主体html内容部分： <body> <div id="d1">树形列表</div> <div id="d2"><<</div>

曾经终败给现在/ 2022年06月11日 07:08/ 0 赞/ 161 阅读

相关原生js简单实现jQuery的动画效果

// 动画效果 function startMove(obj,json,fn){ clearInterval(obj.timer); var

偏执的太偏执、/ 2022年06月03日 05:35/ 0 赞/ 153 阅读

相关原生js模仿jquery Scroll动画

有时候我们在vue项目中需要用到有关scroll的动画,但是又没jquery那样的animate简单的动画方法,又要避免引入jquery的包导致过大,于是就用原生js模仿一个:

你的名字/ 2022年04月11日 02:45/ 0 赞/ 223 阅读

相关原生js实现简单轮播图效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页<

Love The Way You Lie/ 2022年04月06日 07:49/ 0 赞/ 221 阅读

相关 jQuery动画效果——点赞动画效果

任务描述本关任务：掌握jQuery常见的动画效果——自定义动画。实现的效果如下： ![206510][] 相关知识为了完成本关任务，你需要掌握：1.平移动画，

清疚/ 2022年04月05日 13:44/ 0 赞/ 370 阅读