zoukankan      html  css  js  c++  java

  • 仿淘宝的浮动工具栏（兼容IE6和其他浏览器）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>  
        <title>仿淘宝的浮动工具栏</title>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  
        <style type="text/css">  
        #box    {float:inherit;position:relative;width:500px;}  
        .div1    {}  
        .div2    {position:fixed;_position:absolute;top:-1px;z-index:295;}  
            </style>     
    </head>  
        
      <body>  
      <h2>仿淘宝的浮动工具栏</h2>  
      <div id="box">   
        <div id="float" class="div1" style="float: left; 500px; background:#ddd">
            <table width="100%" style=" border:1">
            <tr>
            <td>
                <select>
                    <option value="1">内容1xxxxxxxx</option>
                    <option value="2">内容2</option>
                    <option value="3">内容3</option>
                    <option value="4">内容4</option>
                    <option value="5">内容5</option>
                </select>
            </td>
            <td>
                <select>
                    <option value="1">内容1yyyyyyyy</option>
                    <option value="2">内容2</option>
                    <option value="3">内容3</option>
                    <option value="4">内容4</option>
                    <option value="5">内容5</option>
                </select>
            </td>
            <td><input  type="text" id="text1" /><input type="button" value="确定" /><input type="button" value="取消" /></td>
            </tr>
            </table>
        </div>    
          
         <br/>  
         <br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>
            //随滚动移动的部分代码<br/>   
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>   
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>   
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
            //随滚动移动的部分代码<br/>  
      </div>  
      <script type="text/javascript">
          (function () {
              var oDiv = document.getElementById("float");

                var iE6 = window.ActiveXObject && !window.XMLHttpRequest;//判断是否是IE6
                var H = 0;
                var Y = oDiv;
                while (Y) {
                    H += Y.offsetTop; 
                    Y = Y.offsetParent
                };
                //window.onscroll 事件用于捕捉页面垂直和水平的滚动
                window.onscroll = function () {
                    var s = document.body.scrollTop || document.documentElement.scrollTop;
        
                    if (s > H) {
                        oDiv.className = "div1 div2";
                        if (iE6) { oDiv.style.top = (s - H) + "px"; }
                    }
                    else {
                        oDiv.className = "div1";
                    }
                };
          })();   
        </script>
       
      </body>  
    </html> 
  • 相关阅读:
    May 1 2017 Week 18 Monday
    April 30 2017 Week 18 Sunday
    April 29 2017 Week 17 Saturday
    April 28 2017 Week 17 Friday
    April 27 2017 Week 17 Thursday
    April 26 2017 Week 17 Wednesday
    【2017-07-04】Qt信号与槽深入理解之一：信号与槽的连接方式
    April 25 2017 Week 17 Tuesday
    April 24 2017 Week 17 Monday
    为什么丑陋的UI界面却能创造良好的用户体验？
  • 原文地址：https://www.cnblogs.com/zhangliangzlee/p/2683698.html
Copyright © 2011-2022 走看看