每天学一个jquery插件-旋转的图片
旋转的图片
嗯，之前看过别人做的图片旋转，就是让你有一种这玩意有正反面的赶脚，当然我们页面都是一个面，不可能原生就能写成那样，应该是用了插件的，所以我就实现一下效果记下笔记。
效果如下
代码部分
<!DOCTYPE html>
<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样式是因为我第三点的原因。