图片的旋转与放大

实现鼠标经过时图片放大,点击时顺时针旋转90度。需引入jquery

<style>
.scaleImg:hover{
	z-index: 1;
	transform: scale(3, 3);
	transition: .3s transform;
}
</style>
<img class="scaleImg" src="xxxxx.jpg"/>
<script>
$(document).ready(function(){
	$(".scaleImg").each(function(){
		$(this).click(function(){
			var deg = $(this).attr("deg");
			if(deg == null){
				deg = 0;
			}
			deg = parseInt(deg) + 90;
			$(this).attr("deg",deg);
			$(this).mouseover(function(){
				$(this).css('-webkit-transform', 'rotate(' + deg + 'deg) scale(3, 3)');
				$(this).css('-moz-transform', 'rotate(' + deg + 'deg) scale(3, 3)');
				$(this).css('-ms-transform', 'rotate(' + deg + 'deg) scale(3, 3)');
				$(this).css('-o-transform', 'rotate(' + deg + 'deg) scale(3, 3)');
				$(this).css('transform', 'rotate(' + deg + 'deg) scale(3, 3)');
			});
			$(this).mouseout(function(){
				$(this).css('-webkit-transform', 'rotate(' + deg + 'deg)');
				$(this).css('-moz-transform', 'rotate(' + deg + 'deg)');
				$(this).css('-ms-transform', 'rotate(' + deg + 'deg)');
				$(this).css('-o-transform', 'rotate(' + deg + 'deg)');
				$(this).css('transform', 'rotate(' + deg + 'deg)');
			    });
			$(this).mouseout();
			$(this).mouseover();
		});
	});
});
</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注