HTML(HBuilder)作业题3- 图片旋转（jquery）

问：点击图片旋转，点击按钮，旋转回去

答：.css("transform","rotate(  )")

目录

1.css样式（style）

2.展示部分

3.jquery代码部分（script）

---

 

1.css样式（style）

        <style>
			.tp{
				width: 200px;
				border-radius: 30px;/* 圆角 （可选）*/
				transition: 2s;/* 延迟时间 */
				display: inline-block;/* 类似于浮动 */
				margin: 20px;/* 外边距 */
			}
			#huifu{
				width: 150px; /* 宽度 （可选）*/
				height: 60px; /* 高度 （可选）*/
				font-size: 25px; /* 字体大小 （可选）*/
			}
		</style>

2.展示部分

        <div class="tps">
			<img src="img/图片%20(1).bmp" class="tp">
			<img src="img/图片%20(2).bmp" class="tp">
			<img src="img/图片%20(3).bmp" class="tp">
			<img src="img/图片%20(4).bmp" class="tp">
		</div>
		<div><input type="button" value="return" id="huifu"></div>

3.jquery代码部分（script）

		<script>
			$(document).ready(function(){
				$(".tp").click(function(){
					$(this).css("transform","rotate(60deg)")
				})
				$("#huifu").click(function(){
					$(".tp").css("transform","rotate(0deg)")
				})
			});
		</script>

------------分割线---------------

菜鸟古古 2022-1-6 19:10:26