zoukankan      html  css  js  c++  java
  • 竖排轮播

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <!--<link rel="stylesheet" href="css/marquee.css" />-->

    <-- http://demo.lanrenzhijia.com/2016/marquee1101/  网址-->
    <style>
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    a{color:#333;}
    .demopage{960px;margin:0 auto;}
    /* #marquee2 */
    #marquee2{
    162px;
    /*height:324px;*/
    height: 648px;
    overflow:hidden;
    }
    #marquee2 ul li{
    float:left;
    border:1px solid #ddd;
    height:150px;
    padding:5px;
    }
    #marquee2 ul li img{display:block;}
    .control{
    height:24px;
    line-height:24px;
    overflow:hidden;
    padding:15px 0 0 0;
    }
    #marquee2 ul li{
    float:left;
    border:1px solid #ddd;
    120px;
    height:150px;
    padding:5px;
    }
    .aa1{
    background:red;
    }
    .aa2{
    background:orange;
    }
    .aa3{
    background:yellow;
    }
    .aa4{
    background:green;
    }
    .aa5{
    background:greenyellow;
    }
    .aa6{
    background:blue;
    }
    .aa7{
    background:purple;
    }
    .aa8{
    background:skyblue;
    }
    </style>
    <body>
    <div class="demopage">
    <div id="marquee2">
    <ul style="height: 1296px;">

    <li class="aa1"></li>
    <li class="aa2"></li>
    <li class="aa3"></li>
    <li class="aa4"></li>
    <li class="aa5"></li>
    <li class="aa6"></li>
    <li class="aa7"></li>
    <li class="aa8"></li>
    </ul>
    </div>
    <div class="control">
    <a href="javascript:void(0);" id="goD">上键</a>
    <a href="javascript:void(0);" id="goU">下键</a>

    </div>
    </div>
    </body>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    <script type="text/javascript" src="js/marquee.js" ></script>
    <script type="text/javascript">

    //一次纵向滚动一个
    $('#marquee2').kxbdSuperMarquee({
    distance:162,
    time:3,
    btnGo:{up:'#goU',down:'#goD'},
    direction:'down'
    });

    </script>
    </html>

  • 相关阅读:
    Bandit Wargame Level18 Writeup(interactive shell and .bashrc )
    Bandit Wargame Level12 Writeup
    Natas Wargame Level25 Writeup(头部注入+POST/GET注入)
    Mybatis 加载 Mapper配置的四种方式
    设计模式(四)---- 代理模式
    execute() 和 sumbit() 的区别
    Executors提供的四种线程池
    线程的三种实现方法
    同一个线程多次调用start()会出现的问题
    线程的介绍
  • 原文地址:https://www.cnblogs.com/yingxi0/p/9263338.html
Copyright © 2011-2022 走看看