带隐藏的播放器菜单

最新推荐文章于 2022-11-11 13:56:40 发布

三千不可乐

最新推荐文章于 2022-11-11 13:56:40 发布

阅读量608

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_44892111/article/details/105776679

版权

本文介绍如何利用CSS、HTML和JavaScript创建一个具有隐藏功能的播放器菜单。主要借助toggleClass()方法实现交互效果，并引入阿里的图标库简化图标使用。通过创建项目获取CSS链接，将图标轻松整合进设计中。

摘要由CSDN通过智能技术生成

闲暇时间在网上看到了一个带隐藏功能的侧边导航栏，我于是突发奇想，改造一下，变成一个带隐藏功能的播放器菜单。

主要用到了toggleClass()方法，其他的都是一些常见的属性，有些比较麻烦的我会在注释里说明。

html文件代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>音乐播放器</title>
		<link rel="stylesheet"type="text/css"href="musicstyle.css"/>
		<script src="jquery-3.4.1.js"></script>
	</head>
	<body>
		<div class="lk">
			
			<a class="icon iconfont icon-xunhuan"href="#"></a>
			<a class="icon iconfont icon-kuaitui"href="#"></a>
			<a class="icon iconfont icon-bofang"href="#"></a>
			<a class="icon iconfont icon-zanting1"href="#"></a>
			<a class="icon iconfont icon-kuaijin"href=