『解疑』原生JS手风琴效果实现问题解决（最右侧有白色缝隙、抖动）

最新推荐文章于 2022-04-05 21:45:23 发布

DemoJx

最新推荐文章于 2022-04-05 21:45:23 发布

阅读量742

点赞数 1

分类专栏： javascript 前端文章标签： js原生手风琴 javascript 前端

本文链接：https://blog.csdn.net/DemoJx/article/details/90116098

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端

13 篇文章 0 订阅

订阅专栏

发现问题

在制作手风琴效果时，发现最右侧的盒子会抖动且有缝隙

解决问题

（利用前面几个盒子的宽度的改变，来展现出最后一个盒子，无需改变最后一个盒子的宽度，
相当于最后一个盒子因为前面几个盒子的宽度变小而改变自身的位置，但宽度始终不变）
1.将box的宽加大
2.固定最右侧盒子的宽度（固定为展开后的宽度）
3.在移入移出事件中无需再控制最后一个盒子的宽度

已解决问题代码

html+css+js完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
		    margin: 0;
		    padding: 0;
		}
		.inner {
			width: 1200px;
			height: 500px;
			border: 1px solid black;
			overflow: hidden;
			margin: 300px auto;
		}
		#box {
			width: 2500px;/*最右侧会有缝隙，将最右侧的div宽度固定，并将box的宽度调大*/
			height: 500px;
		}
		.dv {
			width: 240px;
			height: 500px;
			float: left;
		}

	</style>
</head>
<body>
	<div class="inner">
		<div id="box">
			<div class="dv" style="background-color: red"></div>
			<div class="dv" style="background-color: green"></div>
			<div class="dv" style="background-color: blue"></div>
			<div class="dv" style="background-color: pink"></div>
			<div class="dv" style="background-color: yellow;width: 800px"></div>
		</div>
	</div>
	
	<script src="common.js"></script>
	<script>
		//获取box
		var box = my$("box");
		//获取每个子元素
		var divs = box.children;
		//给每个子元素dv注册事件
		for(var i= 0;i<divs.length;i++){
			divs[i].onmouseover = mouseoverHandle;
			divs[i].onmouseout = mouseoutHandle;
		}
		function mouseoverHandle(){
			for (var j = 0; j < divs.length-1; j++) {
				slowAnimates(divs[j],{"width":"100px"});
			}
			slowAnimates(this,{"width":"800px"});
		};
		function mouseoutHandle(){
			for (var j = 0; j < divs.length-1; j++) {
				slowAnimates(divs[j],{"width":"240px"});
			}
		}
	</script>
</body>
</html>

把动画函数封装到一个common.js的文件中：

/**
 * [slowAnimates description]可添加多个属性的缓慢动画
 * @param  {[type]} element [description]绑定的元素
 * @param  {[type]} json    [description]目标位置和运动类型的键值对象
 * @param  {[type]} fn    [description]回调函数（可选）
 * @return {[type]}         [description]
 */
function slowAnimates(element,json,fn) {
	//清理定时器
	clearInterval(element.timeId);
	//设置定时器
	element.timeId = setInterval(function(){
		//假设全部已到目标位置
		var flag = true;
		//解析json
		for(var attr in json) {
			//判断是不是opacity
			if (attr == "opacity") {
				//获取当前位置
				var current = getStyle(element,attr)*100;
				//获取目标位置
				var target = json[attr]*100;
				//设置步数
				var step = (target-current)/10;
				step = step>0 ? Math.ceil(step):Math.floor(step);
				current += step;
				element.style[attr] = current/100;
			}else if(attr == "zIndex") {//判断是不是z-index
				element.style[attr] = json[attr];
			}else {
				//获取当前位置
				var current = parseInt(getStyle(element,attr));
				//获取目标位置
				var target =parseInt(json[attr]);
				//设置步数
				var step = (target-current)/10;
				step = step>0 ? Math.ceil(step):Math.floor(step);
				current += step;
				element.style[attr] = current + "px";
			}
			if (current != target) {
				flag = false;
			}
			//测试代码
			console.log("目标位置"+target+"当前位置"+current+"每次移动步数"+step);
		}
		if (flag) {
			clearInterval(element.timeId);
			if (fn) {
				fn();
			}
		}

	},20);
	
};