首页 > 代码库 > 使用css3属性transition实现页面滚动

使用css3属性transition实现页面滚动

2024-09-30 17:29:02   214人阅读

<!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实现页面滚动


联系
我们