<!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. 【枚举】【字符串哈希】Gym - 101164K - Cutting

    给你A B两个串,让你切B串两刀,问你能否把切开的三个串拼成A. 哈希显然. #include<cstdio> #include<cstring> using namespac ...

  2. android 关于Make sure the plugin is properly configured问题的解决办法

    这个问题引发的原因最初的报错是: [2013-10-14 10:01:58 - XXX] The connection to adb is down, and a severe error has o ...

  3. Scut快速开发

    1     开发环境 Scut Lib版本:5.2.3.2 需要安装的软件 a)        IIS和消息队列(MSMQ) b)        数据库,Sql2005以上版本 c)        V ...

  4. jQuery中resetForm与clearForm的区别？

    reset是重置成最初状态,最初状态是可能有默认值的clear是清空form控件的值

  5. 如何在sublime3项目设置中设置python模块的搜索路径？ImportError: No module named *的解决办法

    问题:之前使用pycharm,用的挺溜,但是电脑配置实在不争气,pycharm启动久了,耗去大量内存,导致运行起来越来越慢,于是转向使用sublime text. 把项目从pycharm切换到subl ...

  6. 【Todo】Boost安装与学习

    现在这里找下载包 http://sourceforge.net/projects/boost 我找的是 1_62_0 下面是从公司wiki上找到的一个说明. boost & thrift安装步 ...

  7. phpmyadmin4.1.4安装配置教程

    phpMyAdmin 就是一种 MySQL 数据库的管理工具,安装该工具后,即可以通过 web 形式直接管理 MySQL 数据,而不需要通过执行系统命令来管理,非常适合对数据库操作命令不熟悉的数据库管 ...

  8. hue启用ldap

    [desktop] [[auth]] …… …… backend=desktop.auth.backend.LdapBackend .….. http://gethue.com/ldap-or-pam ...

  9. 猫猫学iOS之UITextField右边设置图片，以及UITextField全解

    猫猫分享,必须精品 原创文章.欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 效果: 封装好的方法: 猫猫封装的一个小方法,简单共享出来,方便 ...

  10. DataGridView绑定泛型List时，利用BindingList来实现增删查改

    DataGridView绑定泛型List时,利用BindingList来实现增删查改  一.   DataGridView绑定泛型List的种种 1.DataGridView数据绑定对比(DataTa ...