这套HTML5手机移动端底部菜单动态切换特效代码,基于HTML5和SVG开发制作的,将宽必为AUTO就可以改为自适应的效果,这套手机底部图标菜单在导航切换时背景颜色也会哪着改变,非常的漂亮,想要开发手机端网站的朋友不要错过这套代码。
使用方法:
<script type="text/javascript">
"use strict";
let body = document.body;
let menu = document.querySelectorAll(".menu__item");
let menuBorder = document.querySelector(".menu__border");
let active;function clickItem() {
active = document.querySelector("button.active");if (active) {
active.classList.remove("active");
}this.classList.add("active");
let box = this.getBoundingClientRect();active = this;
body.style.backgroundColor = active.style.getPropertyValue("--bgColorBody");offsetMenuBorder(box, menuBorder);
}function offsetMenuBorder(box, menuBorder) {
let left =
Math.floor(
box.left -
menuBorder.closest("menu").offsetLeft -
(menuBorder.offsetWidth - box.width) / 2
) + "px";
menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;
}menu.forEach((item) => {
item.addEventListener("click", clickItem);
});
</script>
效果截图: