网页中上下左右箭头的实现及应用案例

蒲公英1001

于 2024-05-20 16:18:49 发布

阅读量661

点赞数 17

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/wangyining070205/article/details/139067260

版权

网页制作中，有时候会用到上下左右四个箭头，箭头带有一定的指向左右，例如网站首页经常会有返回顶部的效果，这个效果中含有上箭头，如图所示。
在这里插入图片描述
再来看淘宝网，有向下的箭头，表示此处有二级菜单。

箭头的实现可以有以下几种方式：
1.图片方式，上例中的返回顶部就可以用绘图软件制作一张图片（本文不讲这种方式）。
2.给div设置两条相邻的边，另两条边不设置（不显示），然后让其旋转一定的角度。
3.使用字体图标，iconfont或者iconmoon，这两种方式的实现效果差不多，本文中用的是第二种。

一、使用iconmoon字体图标实现类似淘宝的下拉菜单效果。

iconmoon字体图标的使用，我之前丛写过一篇文章，大家可以参考。
思路是：
使用::after伪元素，把iconmoon字体图标放在伪元素中，使用了绝对定位。
代码如下。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>字体图标下箭头</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul,li {
				list-style: none;
			}
      a{
				text-decoration: none;
				color:#333;
			}
			@font-face {
				font-family: 'icomoon';
				src: url('fonts/icomoon.eot?1lv3na');
				src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
					url('fonts/icomoon.ttf?1lv3na') format('truetype'),
					url('fonts/icomoon.woff?1lv3na') format('woff'),
					url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
				font-weight: normal;
				font-style: normal;
				font-display: block;
			}

			#myTaobao {
				position: relative;    				/*父元素相对定位*/
				width: 120px;
				height: 35px;
				line-height: 35px;
				margin: 20px 100px;
				box-sizing: border-box;
				padding-left: 10px;
			}
     /* 伪元素::after 放iconmoon字体图标*/
			#myTaobao::after {
				position: absolute;        /*绝对定位，下箭头的位置*/
				top: 0px;
				right: 10px;
				font-family: 'icomoon';   	/*使用icomoon字体*/
				content: '\e91e';     			/*图标编号*/
				color: #ccc;
				font-size: 16px;
			}

			#myTaobao ul {
				position: absolute;   				/*子元素绝对定位*/
				left: 0;
				top: 35px;
				visibility: hidden;
			}
			#myTaobao li{
				padding: 0 10px;
			}
			#myTaobao:hover {
				background-color: #fff;
			}

			#myTaobao:hover ul {
				visibility: visible;
				background-color: #fff;
			}
      #myTaobao li:hover{
				background-color: #dedede;
			}
		</style>
	</head>

	<body>
		<div id="myTaobao">我的淘宝
			<ul>
				<li><a href="#">已买到的宝贝</a></li>
				<li><a href="#">我的足迹</a></li>			
		  </ul>
		</div>
	</body>
</html>

fonts中的文件是从iconmoon官网下载的，用这种方式，只需要掌握字体图标的使用即可，另外需要有关于定位的基础知识，案例中还用到了伪元素::after。
在这里插入图片描述

二、使用div实现四个方向的箭头

下面的代码实现了动态返回顶部的效果，其中用到了上箭头。
以上箭头为例，设置了其中的border-left和border-top，div只显示左边框和上边框，然后让其顺时针旋转45度，就变成了上箭头，如果旋转135度，就变成了右箭头。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				height: 3000px;
			}
			.gotop{
				width: 58px;
				height: 58px;
				border-radius: 6px;
				position: fixed;
				right: 30px;
				bottom: 30px;
				z-index: 9;
				background-color: #fe9a00;
				display: flex;             /*弹性布局*/
				justify-content: center;  /*让子元素水平居中*/
				align-items: center;			/*让子元素垂直居中*/
			}
		.arrowTop{
			width: 16px;
			height: 16px;
			border-left: 2px solid #fff;   /*设置左边框*/
			border-top: 2px solid #fff;    /*设置上边框*/
			transform:rotate(45deg);
			cursor: pointer;
		}
		.arrowLeft{
			width: 16px;
			height: 16px;
			border-left: 2px solid #fe9a00;   /*设置左边框*/
			border-top: 2px solid  #fe9a00;    /*设置上边框*/
			transform:rotate(-45deg);
			cursor: pointer;
		}
		.arrowRight{
			width: 16px;
			height: 16px;
			border-right: 2px solid #fe9a00;   /*设置左边框*/
			border-top: 2px solid  #fe9a00;    /*设置上边框*/
			transform:rotate(45deg);
			cursor: pointer;
		}
		.arrowDown{
			width: 16px;
			height: 16px;
			border-right: 2px solid #fe9a00;   /*设置左边框*/
			border-top: 2px solid  #fe9a00;    /*设置上边框*/
			transform:rotate(135deg);
			cursor: pointer;
		}
		</style>
	</head>
	<body>
		<div class='arrowLeft'></div>
		<div class='arrowRight'></div>
		<div class='arrowDown'></div>
		
		<div class="gotop">
			<div class="arrowTop">
			</div>
		</div>
		<!-- 以下代码为返回顶部的js代码 -->
		<script type="text/javascript">
			var  returnTop=document.querySelector('.arrowTop')
			returnTop.addEventListener('click', function() {
				window.timer = setInterval(function() {
					var step =  window.pageYOffset/ 10;
					step = Math.ceil(step);
					if (window.pageYOffset == 0) 
						clearInterval(window.timer);
					window.scrollTo(0, window.pageYOffset - step);
				}, 15);
			})
		</script> 
	</body>
</html>

三使用span设置边框实现淘宝案例一的效果

我通过设置边框的方式尝试实现案例一淘宝的效果，因为在一行上，没有使用div标记，而是使用了span标记，设置其为行内块元素。比较发现，位置不太好控制，只是不需要引入外部的iconmoon字体。

display: inline-block;

完整代码如下。

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>伪元素选择器使用场景-字体图标倒三角</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul,li {
				list-style: none;
			}
      a{
				text-decoration: none;
				color:#333;
			}
			#myTaobao {
				position: relative;    				/*父元素相对定位*/
				width: 120px;
				height: 35px;
				line-height: 35px;
				margin: 20px 100px;
				box-sizing: border-box;
				padding-left: 10px;
			}
			#myTaobao .arrowDown{
				width: 5px;
				height: 5px;
				border-right: 2px solid #ccc;   /*设置左边框*/
				border-top: 2px solid  #ccc;    /*设置上边框*/
				transform:rotate(135deg);
				display: inline-block;
			}
			#myTaobao ul {
				position: absolute;   				/*子元素绝对定位*/
				left: 0;
				top: 35px;
				visibility: hidden;
			}
			#myTaobao li{
				padding: 0 10px;
			}
			#myTaobao:hover {
				background-color: #fff;
			}

			#myTaobao:hover ul {
				visibility: visible;
				background-color: #fff;
			}
      #myTaobao li:hover{
				background-color: #dedede;
			}
		</style>
	</head>

	<body>
		<div id="myTaobao">我的淘宝&nbsp;<span class='arrowDown'></span>
			<ul>
				<li><a href="#">已买到的宝贝</a></li>
				<li><a href="#">我的足迹</a></li>			
		  </ul>
		</div>
	</body>
</html>

在实际的使用中，可根据需要，看哪种方式更合适。个人觉得，返回顶部的那个没必要使用字体图标，和其他元素在一行上的，倾向于使用iconmoon字体图标。

蒲公英1001

关注

17
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
网页中上下左右箭头的实现及应用案例

网页制作中，有时候会用到上下左右四个箭头，箭头带有一定的指向左右，例如网站首页经常会有返回顶部的效果，这个效果中含有上箭头，如图所示。再来看淘宝网，有向下的箭头，表示此处有二级菜单。箭头的实现可以有以下几种方式：1.图片方式，上例中的返回顶部就可以用绘图软件制作一张图片（本文不讲这种方式）。2.给div设置两条相邻的边，另两条边不设置（不显示），然后让其旋转一定的角度。3.使用字体图标，iconfont或者iconmoon，这两种方式的实现效果差不多，本文中用的是第二种。
复制链接

扫一扫