每天学一个jquery插件-旋转的图片

每天学一个jquery插件-旋转的图片

旋转的图片

嗯,之前看过别人做的图片旋转,就是让你有一种这玩意有正反面的赶脚,当然我们页面都是一个面,不可能原生就能写成那样,应该是用了插件的,所以我就实现一下效果记下笔记。

效果如下

代码部分


<html>
	<head>
		<meta charset="utf-8">
		<title>旋转的图片title>
		<script src="js/jquery-3.4.1.min.js">script>
		<style>
			*{
      
				margin: 0px;
				padding: 0px;
			}
			#div{
      
				border: 1px solid lightgray;
				width: 95%;
				height: 400px;
				margin: 20px auto;
			}
			#div img{
      
				width: 100%;
				height: 100%;
				transition: all 1s linear;
			}
		style>
	head>
	<body>
		<div id="div" class="xzdtp" data-a="img/1.png" data-b="img/2.png">
			<img src="img/1.png"/>
		div>
	body>
html>
<script>
	$(function(){
      
		var span = 500;
		var t = null;
		var t2 = null;
		$(".xzdtp").mouseenter(function(){
      
			var that = $(this);
			var a = $(this).attr("data-a");
			var b = $(this).attr("data-b");
			$(this).children("img").css({
      
				"transform":"rotateY(180deg)"
			})
			clearTimeout(t);
			t = setTimeout(function(){
      
				that.children("img").attr("src",b);
				that.css("transform","rotateY(180deg)");
			},span)
		})
		$(".xzdtp").mouseleave(function(){
      
			var that = $(this);
			var a = $(this).attr("data-a");
			var b = $(this).attr("data-b");
			$(this).children("img").css({
      
				"transform":"rotateY(0deg)"
			})
			clearTimeout(t);
			t = setTimeout(function(){
      
				that.children("img").attr("src",a);
				that.css("transform","rotateY(0deg)");
			},span)
		})
	})
script>

思路如下

  • 反正做这个东西的时候,要提前知道ab面的图片的路径,所以我在这里将ab面的路径用data-a、b来提前存好
  • 然后就是鼠标移入和移出事件触发动画效果,道理就是触发事件同时换对应的图片就会好了
  • 当然加入动画效果我们用到了transform:"rotateY"这个属性,直接修改css属性就行了,然后用 transition规定样式改变的动画效果
  • 在动画进行的过程中我们规定了linear动画平滑进行,所以我们可以知道当图片旋转到中间的时候就该替换图片了
  • 替换图片之后我们这里会让替换进来的图片也是翻转的情况,所以我直接把外面的容器也在中间的时候跟着转对应的度数,这样就负负得正了,啊哈,不直接改图片的css样式是因为我第三点的原因。

你可能感兴趣的:(每天学一个jquery插件,javascript,jquery)