zoukankan      html  css  js  c++  java
  • html 笔记

    图片墙循环代码:

    <div id="lunbo" style="overflow:hidden;1350px;">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td id="lunbo1" valign="top" align="center">
    <table cellpadding="2" cellspacing="0" border="10" bordercolor="#FFFF99">
    <tr align="center">
    <td><img src="img/2008916212512987_2.jpg" width="300" height="470"></td>
    <td><img src="img/W020080716457929217743.jpg" width="300" height="470"></td>
    <td><img src="img/20150507142843_BS4cA.jpeg" width="300" height="470"></td>
    <td><img src="img/ULVssF9HK_1300740737.jpg" width="300" height="470"></td>
    <td><img src="img/p1099542477.jpg" width="300" height="470"></td>
    <td><img src="img/5.jpg" width="300" height="470"></td>
    </tr>
    </table>
    </td>
    <td id="lunbo2" valign="top"></td>
    </tr>
    </table>
    </div>

    <script>
    var speed=30//速度数值越大速度越慢
    lunbo2.innerHTML=lunbo1.innerHTML
    function Marquee(){
    if(lunbo.scrollLeft<=0)
    lunbo.scrollLeft+=lunbo2.offsetWidth
    else{
    lunbo.scrollLeft--
    }
    }
    var MyMar=setInterval(Marquee,speed)
    lunbo.onmouseover=function() {clearInterval(MyMar)}
    lunbo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    </script> 

    标题滑动隐藏效果

    <script type="text/javascript">
    $(document).ready(function(){
    $(".flip").click(function(){
    $(".panel").slideToggle("slow");
    });
    });
    </script>

    <style type="text/css">
    div.panel,p.flip
    {
    margin:0px;
    padding:5px;
    text-align:center;
    background:#e5eecc;
    border:solid 1px #c3c3c3;
    }
    div.panel
    {
    height:120px;
    display:none;
    }
    </style>
    </head>

    <body>

    <div class="panel">
    <p>11111</p>
    <p>11111</p>
    </div>

    <p class="flip">请点击这里</p>

    阴影效果

    box-shadow:0px -10px 15px #000000;

    透明效果

     opacity:0.8;

  • 相关阅读:
    今日总结
    今日总结
    每日总结
    每日总结
    小程序之navigator跳转方式
    vue面试题(上)
    ES6 中的 set 用法
    维信小程序 如何 实现下拉刷新?
    微信小程序的相关文件类型有哪些??
    vue中v-if与v-show的区别以及使用场景
  • 原文地址:https://www.cnblogs.com/xcc2016/p/5493763.html
Copyright © 2011-2022 走看看