<!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. 【强联通分量缩点】【Tarjan】bzoj1051 [HAOI2006]受欢迎的牛

    就是看是否有一些点,从其他任何点出发都可到达 定理:有向无环图中唯一出度为0的点,一定可以由任何点出发均可达. 所以缩点,若出度为零的点(强联通分量)唯一,则答案为该强联通分量中点的度数. 若不唯一, ...

  2. Idea集成svn

    Idea集成svn 既然要使用svn,首先需要下载一个 svn的客户端,到这里下载对应的安装程序:http://subversion.apache.org/packages.html#windows ...

  3. Java中的文件操作（一）RandomAccessFile

    今天,学到的是java中的文件操作. Java.IO.File Java中操作文件用到RandomAccessFile类,既可以读取文件内容,也可以向文件输出数据,但不同与普通输入/输出流的是Rand ...

  4. codevs 1080 线段树练习--用树状数组做的

    1080 线段树练习  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题目描述 Description 一行N个方格,开始每个格子里都有一个整数.现在动态 ...

  5. linux禁ping与限制ip登录

    以root进入linux系统,然后编辑文件icmp_echo_ignore_allvi /proc/sys/net/ipv4/icmp_echo_ignore_all将其值改为1后为禁止PING将其值 ...

  6. Eclipse环境安装C/C++插件CDT和Eclipse安装的插件卸载(删除)

    http://blog.csdn.net/typa01_kk/article/details/49252513

  7. mysql原创博客

    http://blog.itpub.net/15480802/viewspace-1755100/

  8. Inno Setup入门（十六）——Inno Setup类参考（2）

    Inno Setup入门(十六)——Inno Setup类参考(2) http://379910987.blog.163.com/blog/static/33523797201112755641236 ...

  9. java使用HttpClient 发送get、pot请求

    package eidolon.messageback.PostUtil; import java.io.BufferedReader; import java.io.IOException; imp ...

  10. 新公司官网项目优化实践（Vue）

    入职后接手website-html和website-mobile项目,发现项目加载速度不太理想,于是结合自己之前的经验对项目做了优化.此篇文章主要记录这次优化详情. 原始项目:开发环境:website ...