html简单组件（五）：点击旋转箭头

最新推荐文章于 2024-05-28 15:41:28 发布

一方通行00

最新推荐文章于 2024-05-28 15:41:28 发布

阅读量2.6k

点赞数 2

分类专栏： HTML简单组件文章标签： html5 css3 jquery

本文链接：https://blog.csdn.net/qq_26666947/article/details/113755106

版权

HTML简单组件专栏收录该内容

9 篇文章 6 订阅

订阅专栏

html简单组件（五）：点击旋转箭头

实现效果图：

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style>
			.text{
			    display: inline-block;
			    border-top: 5px solid;
			    border-right: 5px solid;
			    width: 50px;
			    height: 50px;
			    border-color: #EA6000;
			    transform: rotate(-45deg);
			    margin: 50px auto auto 100px;
				transition: all 0.4s ease;
				-webkit-transition: all 0.5s ease;
			}
		</style>
	</head>
	<body>
		<p>点击旋转箭头：</p>
		<span class="text" onclick="change()"></span>
		
		<script type="text/javascript">
			var flag = true;
			function change(){
				if(flag) {
					$(".text").css("transform","rotate(135deg)");
					flag = false;
				}else {
					$(".text").css("transform","rotate(-45deg)");
					flag = true;
				}
			}
		</script>
	</body>
</html>

一方通行00

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
html简单组件（五）：点击旋转箭头

html简单组件（五）：点击旋转箭头实现效果图：完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>test</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style>
复制链接

扫一扫