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

偏执的太偏执、 2022-06-03 05:35 221阅读 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 条评论，221人围观）

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

相关阅读

相关用jQuery编写简单的动画效果

jQuery是一种基于JavaScript库的快速、小型而且特别丰富的JavaScript库。它极大地简化了HTML文档遍历和操作、事件处理、动画效果和AJAX交互等功能。jQ

爱被打了一巴掌/ 2024年03月24日 21:12/ 0 赞/ 67 阅读

相关原生js实现移动动画，变化动画

初生牛犊不怕虎，想用博客来记录自己以前的一些学习经历，对您有帮助的话请留下你们的赞哦！话不多说进入正题首先我们应该怎么用原生js实现动画，思路是这样的 1. 通过某

浅浅的花香味﹌/ 2023年06月29日 10:53/ 0 赞/ 31 阅读

相关 jQuery - 效果动画

前言： jQuery给我们封装了很多的动画效果，相比起简单传统的CSS来说，功能强大很多，今天就来学习学习 jQuery给我们封装的一系列的动画

迈不过友情╰/ 2023年06月15日 07:30/ 0 赞/ 71 阅读

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

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

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

相关 jQuery动画效果

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

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

相关 jQuery UI实现动画效果

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

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

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

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

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

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

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

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

相关原生js模仿jquery Scroll动画

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

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

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

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

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