使用css3属性transition实现页面滚动
2024-09-30 06:29:08
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<script src="http://libs.baidu.com/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;
} .button {
position: absolute;
bottom: 0;
}
</style>
</head> <body>
<div id='content'>
<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这个属性发生变化
最新文章
- Iframe 知识点总结
- ajax提交请求返回对象异常问题
- <;读书笔记>;软件调试之道 :从大局看调试-发现代码存在问题
- let it be
- 程序设计入门——C语言 第2周编程练习 信号报告(5分)
- 二项堆(三)之 Java的实现
- redis unwatch discard
- (19)odoo中的javascript
- Temporary-Post-Used-For-Style-Detection-Title-1901742601
- Python 开源异步并发框架的未来
- 利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈
- [转]LayoutInflater的inflate函数用法
- orderBy新写法
- 使用Tensorflow操作MNIST数据
- ASP.NET Web Service 标准SOAP开发案例代码(自定义验证安全头SOAPHeader)
- windows 系统分布式版本控制 git 使用学习
- P2824 [HEOI2016/TJOI2016]排序
- RequireJS模块化之循环依赖
- CentOS 7中firewall防火墙详解和配置以及切换为iptables防火墙
- go build 不同系统下的可执行文件