个人中心
gpt4 book ai didi

jquery - header 定位、样式和浏览器窗口滚动

转载 作者：太空宇宙 更新时间：2023-11-03 19:18:11 25 4
gpt4 key购买 nike

我在根据我的要求设置标题样式时遇到问题。我的 header 包含 3 个 div。第一个包含表格，在我的例子中代表标签，每个标签在公共(public)“tr 标签”下的“td 标签”中，我使用 jquery“jquery-1.5.1.min.js”，我无法附加 js 文件我希望你能从互联网上得到它，用于运动。剩下的两个 div 用于左右移动表格的按钮。首先，我希望你能很好地理解我的情况。我无法满足他们的要求是:

1.我不希望左右滚动条出现，我尝试设置 body 的 overflow 属性 :hidden 然后它起作用了，但是当调整浏览器窗口大小时现在调整大小。

2.我不想要剩余的选项卡，如果您向右滚动可以看到它们。我只想要 7 个选项卡，当我向左或向右单击时，剩余的选项卡出现。

3.我希望当我从任何计算机浏览此页面时具有相同的大小。我的意思是标题完全填满了浏览器窗口的顶部，没有向左或向右滚动，并且确切的高度等于 65px。因为它在我的笔记本电脑上看起来没问题，但是当我在我 friend 的笔记本电脑上尝试时，标题完全改变了它的位置。

我认为位置样式会影响我使用绝对值的标题，但我问过一位程序员，将其设置为绝对值不是一个好主意!

这项工作花了我一个多星期的时间，我花了几个小时重新设计和重新定位，但我不明白。我希望你能理解我的意思，对这么长的段落感到抱歉:/

我的html代码

    <!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>Untitled Page</title>
    <script src=jquery-1.5.1.min.js></script>

    <style type="text/css">

a.taps_link
{
    text-decoration:none;
    color:White;
    text-shadow: 2px 2px 7px #111;
    color: #f5f5f5;
}
img.direction:hover
{
    padding:1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;

} 
td.taps:hover
{
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.41, rgb(73,75,75)),
    color-stop(0.92, rgb(40,41,41))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(73,75,75) 41%,
    rgb(40,41,41) 92%
);



    border-bottom-color:#494b4b;
}
td.taps
{
    text-align:center;
    text-align:center;
    min-width:140px;
    padding:6px 4px 6px 4px




}
body
{
    font-family:Tahoma;
    font-size:15px;

}

#header_top
{   
    text-shadow: 2px 2px 7px #111;
    color: #f5f5f5;
}

</style>
</head>
<body  style="  background-color:Green;">
<!--#D0D0D0-->
    <div style=" height:65px; background-color: Black; margin:-8px -8px 0px -8px ;">
<!--#336699#494B4B-->

   <div  id="tab_Menu_container" style=" overflow:inherit;margin-left:274px;position:absolute; z-index:3; margin-top:-10px; width:80%;"  >
          <table rules="all" id="tab_Menu" style=" margin-top:43px; position:absolute">
                <tr >
                    <td class="taps"><a class="taps_link" href="#">first</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">aabbccddeeffgghhiijj</a></td>
                    <td class="taps"><a class="taps_link" href="#">final</a></td>


                </tr>
           </table>
    </div>
    <div id="upLeft_corner" style=" height:65px; width:274px;background-color:Aqua; position:absolute;z-index:4"> 
        <input type="button" value="<<" id="b" alt="previous situation" style="position:absolute;margin-left:240px;margin-top:41px" />
        <!--<img src="previous.png" id="b" alt="previous situation" style="position:absolute;margin-left:252px;margin-top:41px"/><<--> 
    </div>
    <div id="upRight_corner" style=" margin-left: 1318px;height:65px; width:112px; background-color: Aqua; position:absolute; z-index:4">
    <input type="button" value=">>" id="a" alt="next situation" style="position:absolute;margin-top:41px" />
    <!--
    <img src="next.png"  id="a" alt="next situation" style="position:absolute;margin-top:41px"/> 
    <img src="all.png"  id="all" alt="Show all situation" style="position:absolute;margin-top:41px;margin-left:29px; "/>-->

    </div>
</div>








<script>

    var counter,td_counter;
    counter=0;
    td_counter= document.getElementById('tab_Menu').getElementsByTagName('tr')[0].getElementsByTagName('td').length;
    console.log(td_counter);
if (td_counter <= 7) {

    $("#a").hide();

    $("#b").hide();

    $("#all").hide();
}

if (counter == 0) {
    $("#a").hide();//a= >>
}

//rigth
$("#a").click(function () {

        $("#b").show();
        counter--;
        $("#tab_Menu").animate({ "left": "+=150px" }, "slow");

    if(counter==0)
    {
        $("#a").hide();
    }


    /*$("#b").show();
    right_counter++;
    $("#tab_Menu").animate({ "left": "+=152px" }, "slow");
   var temp1 = td_counter - right_counter;
    if (temp1==temp) {
        $("#a").hide();

    }*/

});

//left
$("#b").click(function () {
        console.log(counter);
        $("#a").show();
        counter++;
        $("#tab_Menu").animate({ "left": "-=149px" }, "slow");

    if (counter+7>=td_counter)
    {
        $("#b").hide();
    }

    /*
    $("#a").show();
    left_counter++;
    $("#tab_Menu").animate({ "left": "-=152px" }, "slow");
    temp = td_counter - left_counter;
    if (temp == 7) {
        $("#b").hide();
        //left_counter = 0;
    }*/

});

</script>








</body>
</html>

最佳答案

好吧，回答 1。您需要将整个“移动面板”设置在一个 div 中，并在该 div 上设置一个 overflow: hidden; 以摆脱滚动条。

如果您想减轻工作量，不妨看看这些。这种jquery的事情都做了一遍又一遍，为什么还要再码一次？

http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials

编辑:看看http://jsfiddle.net/et7mc/3/我已经编写了一些可以帮助您前进的代码。就像我上面说的，它真的不需要。有很多插件可以做到这一点。

关于jquery - header 定位、样式和浏览器窗口滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5450554/

25 4 0
文章推荐： javascript - 更改 file_field 的 css？
文章推荐： python - Tornado 和基于Python的守护进程之间的最佳通信方式是什么？
文章推荐： css - @font-face 在 Firefox 3.6 for mac 中无法正常工作
文章推荐： html - 中心导航按钮
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com