<!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这个属性发生变化

使用css3属性transition实现页面滚动的更多相关文章

  1. 理解CSS3属性transition

    一.说明 1.1 定义和用法 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property:规定设置过渡效果的CSS属性的名称. transition-du ...

  2. css3属性 transition transform

    1.transition 译:过渡,转变 可以设置过渡属性 transition: property duration timing-function delay; transition-proper ...

  3. CSS3属性transition

    CSS3 Transitions 指定过渡 语法: transition: property duration timing-function delay;     参数一: transition-p ...

  4. 关于CSS3属性transition的触发

    关于怎么触发transition的效果,前面有篇文章说过一次,<关于transition和animation>,而且在实际的项目生产中,也是一直这么使用的,因为明明知道直接添加class是 ...

  5. 移动端web页面滚动不流畅，卡顿闪烁解决方案

    移动端web页面滚动不流畅,卡顿闪烁解决方案   1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...

  6. 【特效】页面滚动到相应位置运行css3动画

    请到我的个人博客网站上浏览此文章,欢迎评论和建议. 文章链接:http://www.xiaoxianworld.com/archives/87 现在css3动画很常见了,实际项目中经常应用,特别是那种 ...

  7. CSS3 ： transition 属性

    CSS3的 transition 属性用于状态过度效果! 1.语法: transition: property duration timing-function delay; -moz-transit ...

  8. AOS – 另外一个独特的页面滚动动画库（CSS3）

    AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...

  9. 使用CSS3的“transition ”属性控制长宽度的缓慢变化

    有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了.这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用 ...

随机推荐

  1. 20162321 实验一 Java开发环境的熟悉(Linux + Eclipse)

    北京电子科技学院(BESTI) 实 验 报 告 课程:程序设计与数据结构 班级: 1623 姓名: 王彪 学号:20162321 指导教师:娄嘉鹏 王志强 实验日期:3月25日 实验密级: 非密级 预 ...

  2. [HDU3756]Dome of Circus

    题目大意: 在一个立体的空间内有n个点(x,y,z),满足z>=0. 现在要你放一个体积尽量小的圆锥,把这些点都包住. 求圆锥的高和底面半径. 思路: 因为圆锥里面是对称的,因此问题很容易可以转 ...

  3. 102.愤怒的LJF

    2841 愤怒的LJF  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description LJF发现ZPC的积分比他高,他很愤 ...

  4. Educational Codeforces Round 8 B. New Skateboard 暴力

    B. New Skateboard 题目连接: http://www.codeforces.com/contest/628/problem/A Description Max wants to buy ...

  5. Codeforces Round #127 (Div. 1) A. Clear Symmetry 打表

    A. Clear Symmetry 题目连接: http://codeforces.com/contest/201/problem/A Description Consider some square ...

  6. 原生js封装的一些jquery方法

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return f ...

  7. volitale最经典理解

    volatile跟Java的内存模型有关,非volatile变量时,平常情况,线程执行时会将变量从主内存加载到线程工作内存,建立一个副本,在某个时刻写回. valatile指的每次都读取主内存的值,有 ...

  8. 支持解析GitHub Flavored Markdown(GFM)的PHP库-Parsedown

    网上搜索PHP的markdown解析库,只能找得到Michel的PHP Markdown,这个库很不错,但是他只能支持标准markdown和他自己定义的一套扩展php Markdown Extra.这 ...

  9. Qunit的使用

    1.新建一个html页面,如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht ...

  10. string 与BigDecimal互转

    小编知道在java中数据类型非常 的严格了,我们如果一个地方不小心就会导致应用出问题了,今天 小编就在string 转BigDecimal上碰到了一些问题,下面整理了几个例子大家一起来看看.   例子 ...