html：简单的jquery图片旋转

最新推荐文章于 2022-02-23 15:54:45 发布

原创最新推荐文章于 2022-02-23 15:54:45 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS #jquery #web

Web 同时被 3 个专栏收录

80 篇文章

订阅专栏

jQuery

17 篇文章

订阅专栏

HTML

6 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的图片旋转动画效果。通过点击包含图片的div元素，图片将以div为中心进行旋转，同时改变背景颜色和图片源。此示例使用了jQuery库简化DOM操作。

图片旋转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<style>
		.dog{
			width: 256px;
			height:256px;
			background: #faa;
			border-radius: 128px;
			overflow: hidden;
			cursor: pointer;
		}
	</style>
	<script src="./demo/jquery.min.js"></script>
</head>
<body>
	<div class="dog">
		<img src="./demo/dog.png" alt="">
	</div>
</body>
<script>
$('.dog').click(function(){
	s=0;
	v=20;

	setInterval(function(){
		s+=v;
		document.title=s;
		$('.dog').find('img').attr({'src':'./demo/cai.png'}).parent().css('background','#aaf').css('transform','rotate('+s+'deg)');
	},50);
});
</script>
</html>