优美的线

Posted 2020-10-12 cyany_blue

不行两个字，永远在你真的努力之后才有资格说！！！

 

<style>
		.line_img{
			position: relative;
			height: 600px;
			background-color: #aeeeee;
		}
		.line_all{
			display: flex;
			justify-content: space-around;
			flex-wrap: nowrap;
		}
		.line1,.line2,.line3{
			width: 25%;
			height: 10px;
			background-color: #ccc;
			position: absolute;
		}
		.line_obj{
			height: 450px;
			display: flex;
			justify-content: space-around;
			flex-wrap: nowrap;
		}
		.line_obj_item1,.line_obj_item2,.line_obj_item3,.line_obj_item4{
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: #53f535;
		}
		.line_obj_item1{
			align-self: center;
		}
		.line_obj_item2{
			align-self: flex-start;
		}
		.line_obj_item3{
			align-self: flex-end;
		}
		.line_obj_item4{
			align-self: center;
		}

　　

<script src="jquery/jquery-3.1.0.js"></script>
	<script>
		function linePosition(lines,items){
			var line_obj = $(".line_obj").children();
			var obj_positLeft = [];
			var obj_positTop = [];
			var obj_between_height =[];
			var obj_between_width = [];
			// 获取每个盒子的所在位置
			line_obj.each(function(){
				obj_positLeft.push($(this).offset().left);
				obj_positTop.push($(this).offset().top);
				// console.log(obj_positLeft);
				// console.log(obj_positTop);
			});
			// 根据盒子的位置去定义线的位置
			var line_all = $(".line_all").children();
			line_all.each(function(){
				$(this).css({"left":obj_positLeft[$(this).index()]});
			});
			// 获取盒子与盒子之间的高度和宽度，为了算出盒子与盒子的角度
			var $obj_positLeft = $(obj_positLeft);
			var $obj_positTop = $(obj_positTop);
			// console.log($obj_positLeft)
			$obj_positLeft.each(function(i,item){
				var val_hor = $obj_positLeft[i+1]-$obj_positLeft[i];
				obj_between_width.push(val_hor);
				// console.log(obj_between_width)
			});
			$obj_positTop.each(function(i,item){
				var val_ver = $obj_positTop[i+1]-$obj_positTop[i];
				obj_between_height.push(val_ver);
				// console.log(obj_between_height)
			})
			// 斜边的长度以及角度
			var xiebian = [];
			var angle = [];
			var $obj_between_height = $(obj_between_height);
			// var $obj_between_width = $(obj_between_width);
			$obj_between_height.each(function(i,item){
					var val_xieiban = Math.sqrt(obj_between_height[i]*obj_between_height[i]+
						obj_between_width[i]*
						obj_between_width[i]);
					xiebian.push(val_xieiban);
					// console.log(xiebian);
					var val_angle = Math.atan2(obj_between_height[i],obj_between_width[i]);
					angle.push(val_angle);
					// console.log(angle);
			})
			var $angle = $(angle);
			var new_angle =[];
			$angle.each(function(i){
				new_angle.push(angle[i]*180/Math.PI);
			})
			console.log(new_angle);
			line_all.each(function(i){
				$(this).css({"transform":"rotate("+new_angle[$(this).index()]+"deg)","top":obj_positTop[$(this).index()],"transform-origin":"0","width":xiebian[$(this).index()]})
			})
		}
		linePosition();
		$(window).resize(function(){
			linePosition();
		})
	</script>

　　

<div class="line_img">
		<div class="line_all">
			<div class="line1"></div>
			<div class="line2"></div>
			<div class="line3"></div>
		</div>
		<div class="line_obj">
			<div class="line_obj_item1"></div>
			<div class="line_obj_item2"></div>
			<div class="line_obj_item3"></div>
			<div class="line_obj_item4"></div>
		</div>
	</div>