ztouch练习3

最新推荐文章于 2021-06-10 13:24:15 发布

我家小宝_朱朱

最新推荐文章于 2021-06-10 13:24:15 发布

阅读量267

点赞数

分类专栏：移动端-ztouch

移动端-ztouch 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0; padding: 0;}
li{list-style-type: none;}

.tablist-ul{
border: solid 1px #ccc;
background: #f1f1f1;
padding: 5px;
margin-top: 15px;
margin-bottom: 10px;
text-align: center;
}
.tablist-ul li{
display: inline-block;
width:25%;
margin:0px 3%;
height: 30px;
line-height: 30px;

}
.tablist-ul .activity{
background: #FB8600;
color: #fff;
}

.newbox{
width:100%;
overflow: hidden;
}
.newInBox{
width:300%;
}

.newInBox ul{
width:33.3%;
float: left;
}
.newInBox ul li{
padding: 0px 5px;
}

.imgBox{
width: 100%;
overflow: hidden;
}
.imgInBox{
width:400%;
}
.imgInBox li{
float:left;
width:25%;
position: relative;
}
.imgInBox li img{
width:100%;
}
.imgtitle{
width:100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 16px;
text-align: center;
position: absolute;
bottom: 0px;
font-weight: 600;
line-height: 16px;
padding: 5px 0px;
}

.wrapbody{
height: 400px;
overflow: hidden;
border-bottom: 1px solid grey;
}
.wrapInnerBody{

}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>

</head>
<body>
<div class="wrapbody" id="scrollybox">
<div class="wrapInnerBody">
<div class="imgBox" id="imgBox">
<ul class="imgInBox">
<li><img src="./images/1.jpg">
<div class="imgtitle">11111111111</div>
</li>
<li><img src="./images/2.jpg">
<div class="imgtitle">22222222222</div></li>
<li><img src="./images/3.jpg">
<div class="imgtitle">33333333333333</div></li>
<li><img src="./images/4.jpg">
<div class="imgtitle">444444444</div></li>

</ul>
</div>
<div>
<ul class="tablist-ul">
<li class="activity">新闻</li>
<li>军事</li>
<li>娱乐</li>
</ul>
</div>
<div class="newbox" id="newBox">
<div class="newInBox">
<ul>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>

</ul>
<ul>
<li>222222222</li>
<li>222222222</li>
<li>222222222</li>
</ul>
<ul>
<li>33333333</li>
<li>33333333</li>
<li>33333333</li>
</ul>
</div>
</div>
<div style="height: 100px;background-color: #0000cc;">

</div>
<div style="height: 100px;background-color:rosybrown;">

</div>
<div style="height: 100px;background-color:yellowgreen;">

</div>
<div style="height: 100px;background-color:burlywood;">

</div>
<div style="height: 200px;background-color:aquamarine;">

</div>
</div>
</div>
<script type="text/javascript" src="js/libs/zepto/zepto.js"></script>
<script type="text/javascript" src="js/libs/zepto/zTouch.js"></script>
<script>

//上下滚动
var transformYBox = function (obj,value,time,has3d) {
var time=time?time:0;
transl=has3d?"translate3d(0,"+value+"px,0)":"translate(0,"+value+"px)";
obj.css({'-webkit-transform':transl,'-webkit-transition':time+'ms linear'});
}

//获取transform中y的值
var getTransY = function (obj) {
var transform=obj.css("-webkit-transform"),
trans=transform.match(/$(.+)$/),
transY=0;
if(trans){
var transArr=trans[1].split(","),
len=transArr.length;
transY=transArr[len-2].replace("px","");
}
return Number(transY);

}
var scrollYArr = {
sCallback: function (tPoint) {
var self = tPoint.self;
var children = self.children();
var startoffset = getTransY(children);
tPoint.setAttr("startoffset",startoffset);
},
mCallback: function (tPoint){
var self = tPoint.self;
var children = self.children();
var height = children.height();
var selfH = self.height();
var offset = tPoint.mY+tPoint.startoffset;
if(offset>0){
offset = 0;
}

if(Math.abs(offset) > (height-selfH+10)){
offset = -(height-selfH+10);
}
transformYBox(children,offset,0,tPoint.has3d);

}
};

$("#scrollybox").Swipe(scrollYArr);
</script>
</body>

</html>

上下滑动效果：