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