zoukankan      html  css  js  c++  java
  • 视差插件parallarx

    github上的demo,自己拿来改了改。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>parallax</title>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
            .container{
                width:100%;
                height:600px;
                background: #444;
            }
            .wrapper{
                width:50%;
                height:600px;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="wrapper">
                <ul id="scene">
                    <li class="layer" data-depth="0.00"><img src="./img/layer1.png"></li>
                    <li class="layer" data-depth="0.20"><img src="./img/layer2.png"></li>
                    <li class="layer" data-depth="0.40"><img src="./img/layer3.png"></li>
                    <li class="layer" data-depth="0.60"><img src="./img/layer4.png"></li>
                    <li class="layer" data-depth="0.80"><img src="./img/layer5.png"></li>
                    <li class="layer" data-depth="1.00"><img src="./img/layer6.png"></li>
                </ul>
            </div>
        </div>
        <!--<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="./js/parallax/jquery.parallax.min.js"></script>-->
        <script type="text/javascript" src="./js/parallax/parallax.min.js"></script>
        <script type="text/javascript">
            //var scene = $("#scene");
            var scene = document.getElementById('scene');
            var parallax = new Parallax(scene);
        </script>
    </body>
    </html>
  • 相关阅读:
    redis学习(二)-高级特性
    redis学习(一)-基础知识
    设计模式类型
    装饰者设计模式
    udp代理
    docker: unrecognized service
    centos6.x 编译安装zabbix_proxy 2.2.5
    写了一个shell,删除15天以上日志
    tempo 删除团队失败
    github批量删除organization下的private repo
  • 原文地址:https://www.cnblogs.com/zcynine/p/5427034.html
Copyright © 2011-2022 走看看