每天学一个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;
}
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>
想法解释
- 做法按照上面的思路来就行了，关注在翻页动作和动画效果上面。
- 假如左翻就是找到前后动画变化的俩页面
- 前提是当前页面展示的，其他的页面都是没给宽度的
- 左翻就是当前页面水平翻转-90度，并且同时页面宽度跟着缩到0，旋转中心就是右边的边线，左边要翻的页面就宽度逐渐填满当前视口，并且执行翻转动画，从90度翻至0度，这样子就能实现很好的立体翻转的动画效果了
- 右翻就同上
- 额，今天先到这，每天再溜溜.