⼿机版html页⾯左右滑动切换页⾯，移动端⼿指左右滑动切换内
容demo
说在开头
最近移动端做了⼀个⼿指左右滑动切换内容的效果demo;
为了表⽰我的⽆私，决定分享给诸位；(详细代码见附件)
正⽂
先上html代码html>
穿⾐助理
完成
整个页⾯ul部分是需要切换的部分具体内容有js拼接⽽成
css代码如下：(这⾥直接贴上了less编译之后)body,div,ul{margin: 0px;padding: 0px;}
.
m-shape{box-sizing: border-box;}
.m-shape .cont{  overflow: hidden;box-sizing: border-box;
}
.j-cont{  margin: 0 auto;
width: 100%;}
.m-shape .cont ul {
width: 1000%;
position: relative;
margin: 0 7%;
overflow: hidden;
}
.
m-shape .cont ul li {
display: inline-block;
float: left;
width: 8%;
padding: 0 0.3%;
overflow: hidden;
box-sizing: content-box;
}
.m-shape .cont ul li .tishi {
position: absolute;
border-radius: 50%;
background: url(../p_w_picpaths/Assist_icon.png) no-repeat;
background-size: 30px 30px; width: 30px;
height: 30px;
right: 10px;
top: 10px;
}
.m-shape .cont ul li .title {
height: 40px;
line-height: 40px;
text-align: center;
}
.
m-shape .cont ul li .cont {
height: 77%;
text-align: center;
}
.m-shape .cont ul li .cont .img { height: 100%;
text-align: center;
}
.m-shape .cont ul li .cont .img img { height: 100%;
min-height: 100%;
max-height: 100%;
}
.
m-shape .cont ul li .cont p {
text-align: center;
line-height: 40px;
}
.m-shape .cont ul li .msg { position: absolute;
top: 100%;
left: 10%;
background: rgba(0, 0, 0, 0.5); color: #fff;
line-height: 30px;
padding: 10px;
width: 80%;
border-radius: 4px;
}
.m-shape .cont ul li .j-conts_item {
background: #9DE0FF;
border-radius: 6px;
position: relative;
}
.m-shape .but_cont {
text-align: center;
padding: 20px 0;
box sizing}
.
m-shape .but_cont .but {
background: #e9494b;
display: inline-block;
height: 30px;
line-height: 30px;
width: 30%;
border-radius: 15px;
color: #fff;
}
.title{
text-align: center;
height: 40px;
line-height: 40px;
}
上⾯代码有⼀个地⽅要说明⼀下：
j-cont的⼤⼩为保证⾃适应其⼤⼩与⼿机屏幕⼀致(通过js实现，详情见后⾯js)⽽后ul的width设置为1000%；即屏幕宽度的10倍；
li的关键css如下：width: 8%;
padding: 0 0.3%;
overflow: hidden;
box-sizing: content-box;
所以其padding+width = 86%的j-cont，即屏幕宽度的86%；
在执⾏滚动时我也是词义移动86%；但是存在⼀问题如下:
第⼀张图⽚左边没有图⽚；但是必须预留这个位置，不然第⼀张位置这样的，后⾯切换也会有错位：
所以给ul设置marin:0% 7%；保证⾸次位置正确，后⾯每次切换位置也正确。
为了保证所以尺⼨的智能设备⾃由伸缩，写了⼀个⽅法初始化容器的⼤⼩：//初始化容器
var html_cont_initialization = function () {
/
/初始化容器
$(".j-cont").css({
"height": $(window).height() + "px",
"min-height": $(window).height() + "px"
});
//初始化内容容器
$(".j-conts_item").css({
"height": $(window).height() - 110 + "px",
"min-height": $(window).height() - 110 + "px",
"max-height": $(window).height() - 110 + "px"
});
}
其中110px为头部title，以及按钮所在⾏即：$(".title"),$(".but_cont")⾼度之和。
还有⼀段代码，⽤来load内容模板(这个地⽅，现在是假数据)var sex_initialization = function () { var html = "";
for (var i = 0; i
html += '
\
\

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。