<!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. 【递推】【推导】【乘法逆元】UVA - 11174 - Stand in a Line

    http://blog.csdn.net/u011915301/article/details/43883039 依旧是<训练指南>上的一道例题.书上讲的比较抽象,下面就把解法具体一下.因 ...

  2. 【预处理】Codeforces Round #407 (Div. 2) C. Functions again

    考虑枚举每个子串开头的位置,然后答案转化成询问这个位置之后 哪个位置的前缀和 - 这位置的前缀和 最大(当然是已经把绝对值和正负的情况处理好了,可以发现按奇偶,这个序列只有两种情况),只需要预处理这两 ...

  3. [bzoj1006](HNOI2008)神奇的国度(弦图最小染色)【太难不会】

    Description K国是一个热衷三角形的国度,连人的交往也只喜欢三角原则. 他们认为三角关系:即AB相互认识,BC相互认识,CA相互认识,是简洁高效的.为了巩固三角关系,K国禁止四边关系,五边关 ...

  4. [BZOJ1001](BeiJingOI 2006）狼抓兔子

    Description   Source: Beijing2006 [BJOI2006] 八中OJ上本题链接:http://www.lydsy.com/JudgeOnline/problem.php? ...

  5. WPF中的动画——（五）路径动画

    路径动画是一种专门用于将对象按照指定的Path移动的动画,虽然我们也可以通过控制动画的旋转和偏移实现对象的移动,但路径动画更专业,它的实现更加简洁明了. 路径动画中最常用的是MatrixAnimati ...

  6. 【java】java获取对象属性类型、属性名称、属性值

    java获取对象属性类型.属性名称.属性值 获取属性 修饰符:[在Field[]循环中使用] String modifier = Modifier.toString(fields[i].getModi ...

  7. WinCE5.0开发环境的建立

    目前WinCE5.0的开发工具主要有以下几种:Platform Builder5.0.EVC4.0+SP4.Visual Studio2005.其中Platform Builder主要用于定制WinC ...

  8. 解决kylin报错：Failed to create dictionary on <db>.<table>, Caused by: java.lang.IllegalArgumentException: Too high cardinality is not suitable for dictionary

    报错信息: 2017-05-13 15:14:30,035 DEBUG [pool-9-thread-10] dict.DictionaryGenerator:94 : Dictionary clas ...

  9. synchronized-锁重入

    public class MyThread5_synchronized1 { /** * 父子类同步必须 都 使用synchronized关键字 */ static class Main { publ ...

  10. Qt 5.7 亮瞎眼的更新

    Qt 5.7的beta版已经出来了,这将是一个超级重大的更新,主要有几个商业版的模块在GPLv3 open source 版的用户也可以用了,其中包括了两个很炫酷的模块: Qt Charts Qt D ...