扇形导航 html svg

最新推荐文章于 2024-05-08 20:13:42 发布

琉璃℡初雪

最新推荐文章于 2024-05-08 20:13:42 发布

阅读量255

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/snow_living/article/details/125525358

版权

项目设计到写个扇形的导航弄了好久记录一下

<body>
	<div class="header-top"> </div>
	<div class="container"> 
		<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="400px">
			<defs>
				<filter id="linear" x="0" y="0" width="200%" height="200%">
					<feOffset result="offOut" in=" " dx="20" dy="20" />
					<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
					<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
				</filter>
			</defs>
			<path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" />
			<path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" />
			<path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" />
			<path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" />
			<path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" />
			<path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" />
			<path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" />
			<path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" />
			<path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" />
			<path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" />

			<foreignObject class='center'>
				<a href="">
					<!-- <img src="t.png" /> -->
					<img src="./img/center.png" alt="">
				</a>
			</foreignObject>

			<foreignObject class='list'>
				<div>
					<i class="fa fa-calendar" aria-hidden="true"></i>
					<p>1</p>
				</div>
			</foreignObject>

			<foreignObject class='list'>
				<div>
					<i class="fa fa-bell-o" aria-hidden="true"></i>
					<p>2</p>
				</div>
			</foreignObject>

			<foreignObject class='list'>
				<div>
					<i class="fa fa-calendar-plus-o" aria-hidden="true"></i>
					  <p>3</p>  
				</div>
			</foreignObject>

			<foreignObject class='list'>
				<div>
					<i class="fa fa-bus" aria-hidden="true"></i>
					<p>4</p>
				</div>
			</foreignObject>

			<foreignObject class='list'>
				<div>
					<i class="fa fa-desktop" aria-hidden="true"></i>
					<p>5</p>
				</div>
			</foreignObject>

			<foreignObject class='list'>
				<div>
					<i class="fa fa-edit" aria-hidden="true"></i>
					<p>6</p>
				</div>
			</foreignObject>

			<foreignObject class='list'>
				<div>
					<i class="fa fa-hdd-o" aria-hidden="true"></i>
					<p>7</p>
				</div>
			</foreignObject>

			<foreignObject class='list'>
				<div>
					<i class="fa fa-image" aria-hidden="true"></i>
					<p>8</p>
				</div>
			</foreignObject>
			<foreignObject class='list'>
				<div>
					<i class="fa fa-calendar1" aria-hidden="true"></i>
					<p>9/p>
				</div>
			</foreignObject>

			<foreignObject class='list'>
				<div>
					<i class="fa fa-bell-o1" aria-hidden="true"></i>
					<p>10</p>
				</div>
			</foreignObject>

		</svg>
	</div>
</body>

<script type="text/javascript">
	Object.defineProperties(window, {
		El: {
			value: function (el) {
				return document.querySelector(el)
			},
			enumerable: false
		},
		Els: {
			value: function (el) {
				return document.querySelectorAll(el)
			},
			enumerable: false
		}
	})

	init();

	window.onresize = function () {
		init();
	}

	function init() {
		//宽高为当前页面的40%
		El(".container").style.width = document.body.clientWidth * .8 + 'px';
		El(".container").style.height = document.body.clientWidth * .5 + 'px';

		var contW = El(".container").style.width,
			contH = El(".container").style.height;

		//svg自适应
		El("#svg").setAttribute('width', contW)
		El("#svg").setAttribute('height', contH)


		//中间图形自适应
		El(".center").setAttribute('x', (contW.split('px')[0] / 2 - contW.split('px')[0] / 4) - 150)
		El(".center").setAttribute('y', (contW.split('px')[0] / 2 - contW.split('px')[0] / 4) - 150)
		El(".center").setAttribute('width', (contW.split('px')[0] / 2) + 300)
		El(".center").setAttribute('height', (contW.split('px')[0] / 2) + 300)

		mkChart();
	}


	function mkChart() {
		//配置各种宽高
		var svgWsm = El("#svg").clientWidth - 100,
			svgHsm = El("#svg").clientHeight - 100,
			svgW2 = svgWsm / 2,
			svgH2 = svgWsm / 2,
			svgW = El("#svg").clientWidth,
			svgH = El("#svg").clientHeight,
			djx = Math.sqrt(Math.pow(svgW2, 2) + Math.pow(svgH2, 2)),
			djxW = Math.sqrt(Math.pow(djx - svgW2, 2) / 2);
		var ds = `M${svgW2 + 50} ${svgH2 + 50} L440 129 A ${svgW2} ${svgH2} 0 0 0 ${djxW + 50} ${djxW + 50} Z`;

		//循环扇形
		Els(".paths").forEach((item, index) => {
			item.setAttribute("d", ds);
			//自己旋转
			item.style.transform = `rotate(${18 * index - 45}deg)  `;
			item.style.transformOrigin = `${svgW2 + 50}px ${svgH2 + 50}px`;
			//触碰
			// item.onmouseenter = () => {
			// 	//扇形放大
			// 	item.style.transform = `rotate(${18*index-45}deg) scale(1.1)`;
			// 	//里面内容同步放大
			// 	Els('.list')[index].style.transform = `rotate(${15*index-55}deg) scale(1.05)`;
			// }
			// item.onmouseleave = () => {
			// 	//还原
			// 	item.style.transform = `rotate(${18*index-45}deg)`;
			// 	Els('.list')[index].style.transform = `rotate(${15*index-55}deg)`;
			// }
		})

		//循环扇形内容
		Els('.list').forEach((item, index) => {
			//自己旋转
			item.style.transform = `rotate(${18 * index - 77}deg)   `;
			item.style.transformOrigin = `${svgW2 + 50}px ${svgH2 + 50}px`;
			//子元素反旋转显示正位
			item.children[0].style.transform = `rotate(${-18 * index + 77}deg)`;
			//触碰
			item.onmouseenter = () => {
				//外层同步放大
				Els('.paths')[index].style.transform = `rotate(${18 * index - 45}deg) scale(1.05)`;
				//内层放大
				item.style.transform = `rotate(${18 * index - 77}deg) ) scale(1)`;
			}
			item.onmouseleave = () => {
				//还原
				Els('.paths')[index].style.transform = `rotate(${18 * index - 45}deg) `;
				item.style.transform = `rotate(${18 * index - 77}deg) `;
			}
			//里面的位置
			item.setAttribute('x', svgW / 2 - svgW / 9);
			item.setAttribute('y', svgH / 10);
			item.setAttribute('width', svgW / 6);
			item.setAttribute('height', svgH / 4);
		})

		//中间事件
		// El(".center>a").onclick = () => {
		// 	alert("中间事件")
		// }
	}



</script>

* {
    margin: 0;
    padding: 0;
   
}
body{
    background:url("../img/u50_state0.jpg") no-repeat center #0b1341 ;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
position: relative;
}


.container {
    position: absolute;
    right: 0;
    left: 0;
    bottom: -60px;
    margin: auto;

}

.header-top{
    width: 100%;
    height: 100px;
    position: absolute;
    background:url("../img/u52.png") no-repeat center ;
    background-size: cover;
    text-align: center;
    color: #fff;
    line-height: 58px;
    font-size: 30px;
    font-weight: bold;
}

#svg path {
    transition: transform .2s;
    color: white;
    cursor: pointer; 
}

#svg .center {
    border-radius: 50%; 


}

#svg .center img {
    width: 100%;
    height: 100%;
}

#svg .list {
    transition: transform .2s;
    cursor: pointer;
    /* background: url("../img/bj.png") no-repeat center;
    background-size: contain;  */
}

#svg .list div {
    text-align: center;
    color: #589bfc;
    padding: 20px 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#svg .list div a{
    color: #589bfc;
    text-decoration: none;
}


.fa{
    width: 50px;
    height: 50px;
    margin-bottom: 5px; 
}