使⽤css3属性transition实现页⾯滚动
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七⼣主题</title>
<script src="libs.baidu/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul,
li {
list-style-type: none;
}
#content {
width: 100%;
height: 100%;
/* top: 20%;
left: 20%; */
overflow: hidden;
position: absolute;
}
.content-wrap {
position: relative;
}
.content-wrap > li {
background: #CAE1FF;
color: red;
float: left;
overflow: hidden;
position: relative;
}
li:nth-child(2) {
background: #9BCD9B;
}
li:nth-child(3) {
background: yellow;
}
button {
width: 100px;
height: 50px;
}
.
js控制css3动画触发button {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<ul class='content-wrap'>
<!-- 第⼀副画⾯ -->
<li> 页⾯1 </li>
<!-- 第⼆副画⾯ -->
<li> 页⾯2 </li>
<!-- 第三副画⾯ -->
<li> 页⾯3 </li>
</ul>
<div class="button">
<button>点击切换页⾯</button>
</div>
</div>
<script type="text/javascript">
var container = $("#content");
// 获取第⼀个⼦节点
var element = container.find(":first");
// li页⾯数量
var slides = element.find("li");
// 获取容器尺⼨
var width = container.width();
var height = container.height();
// 设置li页⾯总宽度
element.css({
width: (slides.length * width) + 'px',
height: height + 'px'
});
// 设置每⼀个页⾯li的宽度
$.each(slides, function(index) {
var slide = slides.eq(index); // 获取到每⼀个li元素
slide.css({ // 设置每⼀个li的尺⼨
width: width + 'px',
height: height + 'px'
});
});
// 绑定⼀个事件，触发通过
$('button').click(function() {
// 在5秒的时间内，移动X的位置，为2个页⾯单位
//?
element.css({
'transition-timing-function': 'linear',
'transition-duration': '10000ms',
'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //设置页⾯X轴移动
});
});
</script>
</body>
</html>
  在页⾯⼦元素单⼀的情况下通过设置⽗元素的定位实现页⾯切换会⽐设置⼦元素简单transform属性是静态属性，不是动画属性，⼀旦写到style⾥⾯，将会直接显⽰作⽤，⽆任何变化过程通过设置transition的⼀些参数，让translate3d这个属性发⽣变化

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