<!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. 【二分】【线段树】hdu6070 Dirt Ratio

    size(l,r)表示区间l,r权值的种类数,让你求min{size(l,r)/(r-l+1)}(1<=l<=r<=n). last[r]表示a[r]上一次出现的位置, 就是二分验证 ...

  2. Android Studio初级介绍

    Android Studio原来不咋地,但是现在可以尝试抛弃eclipse转用它了, 亲儿子到底是亲儿子,现在的Android Studio已经今非昔比,用了一段时间,简直爱不释手,我觉得,It's ...

  3. Scala 匿名函数

    Scala 中定义匿名函数的语法很简单,箭头左边是参数列表,右边是函数体. 使用匿名函数后,我们的代码变得更简洁了. 下面的表达式就定义了一个接受一个Int类型输入参数的匿名函数: var inc = ...

  4. Ubantu配置protoc2.5.0

    首先得到 protobuf 相应的包文件 ,在终端上输入如下 wget http://protobuf.googlecode.com/files/protobuf-2.5.0.tar.gz 下载完毕后 ...

  5. pcap报文格式

    pcap报文格式 pcap报文整体格式 pcap 报文头格式 pcap报文格式,黄色部分为报文头 pcapng报文格式 PCAPNG: PCAP Next Generation Dump File F ...

  6. jQuery中的动画与效果

    1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值: ...

  7. gmock学习01---Linux配置gmock

    本文目的 本文主要介绍gmock 1.6.0版本在Linux上如何部署和使用. gmock是做什么的? 使用C++手动编写mock对象将会是一件十分耗时,易于出错,枯燥乏味的事情.gmock提供一整套 ...

  8. 深入理解Java中为什么内部类可以访问外部类的成员

    内部类简介 虽然Java是一门相对比较简单的编程语言,但是对于初学者, 还是有很多东西感觉云里雾里, 理解的不是很清晰.内部类就是一个经常让初学者感到迷惑的特性. 即使现在我自认为Java学的不错了, ...

  9. Solr 中 Schema 结构说明

    schema.xml位于solr/conf/目录下,类似于数据表配置文件,定义了加入索引的数据的数据类型,主要包括type.fields和其他的一些缺省设置 1.schema的基本配置 <?xm ...

  10. nodejs之路-[0]安装及简易配置

    题外话: 之前写过ubuntu下编译nodejs- 传送门:Ubuntu15.04编译安装nodejsV0.12.3 只是如今基本在win下做开发了-. 就以这篇帖子为开头,作为我踏上nodejs之路 ...