Learn a jquery plug-in every day-water a paging
Water one page
Today I want to make a three-dimensional effect page out, but the effect has not been researched out, temporarily put a semi-finished product, but the idea is clear, it is not a way to achieve it
Current effect
code show as below
<!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;
}
body,html{
width: 100%;
height: 100%;
}
#div{
background-color: gray;
width: 100%;
height: 100%;
display: flex;
overflow:hidden;
}
.div{
background-color:white;
transition: all 0.5s linear;
}
.d0{
background-color: #ecf0f1;
}
.d1{
background-color: #2ecc71;
}
.d2{
background-color: #3498db;
}
.d3{
background-color: #f1c40f;
}
.d4{
background-color: #f39c12;
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
</html>
<script>
$(function(){
var count = 5//一共有多少个页面
for(var i = 0;i<count;i++){
var $div = $("<div class='div d"+i+"' data-i='"+i+"'>第个"+(parseInt(i)+1)+"页面</div>");
$div.appendTo($("#div"));
$div.css({
"min-width":$("#div").width(),
"min-height":$("#div").height()
})
}
$(".div").click(function(e){
var that = $(this);
var w = $(this).width();
var w2 = e.offsetX;
//dir:0就是左翻，1就是右翻
var dir = w/2>w2?0:1;
//ind:获取当前点击页面的页码，用于判断是否执行动画效果
var ind = $(this).attr("data-i");
// console.log(dir,ind)
if(dir==1){
console.log("左翻")
if(that.next().length!=0){
that.css({
"min-width":"0px",
},500)
}
}else{
that.prev().css({
"min-width":$("#div").width()
},500)
}
})
})
</script>
Idea explanation
- Just follow the above ideas and focus on page turning actions and animation effects.
- If you turn to the left, you will find the two pages where the animation changes before and after
- The premise is that the current page is displayed, and other pages are not given width
- Turning to the left means that the current page is flipped horizontally by -90 degrees, and the page width is reduced to 0 at the same time. The center of rotation is the edge on the right. The width of the page to be turned on the left will gradually fill the current viewport, and the flip animation will be performed, turning from 90 degrees. To 0 degrees, this way you can achieve a good three-dimensional flip animation effect
- Same as above when turning right
- Uh, come here today, and walk around every day.