Question

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

1.i不希望出现滚动的左右栏，我试图设置正文的溢出属性：隐藏然后它起作用，但是当调整浏览器窗口大小时，现在调整大小。

2.i如果您向右滚动以显示，则不需要剩余的标签。只要我想要7个标签，当我向左或向右单击其余标签时。

3.i当我从任何计算机浏览此页面时，我想要具有相同的大小。我的意思是标题正好填充浏览器窗口的顶部，没有向左或向右滚动，精确高度等于65px。因为它在我的笔记本电脑中显示正常，但是当我在我的朋友笔记本电脑中尝试它时，标题完全改变了它的位置。 / p>

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

这项工作花了我一个多星期的时间，我花了几个小时重新定位和重新定位，但我没有得到它。我希望你能理解我，并为长段落道歉：/

我的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>

Answer 1

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

如果您想减轻工作量，可能需要查看这些内容。 jquery的这种事情一次又一次地完成，为什么再次编码呢？

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

修改：看看http://jsfiddle.net/et7mc/3/我编写了一些可以帮助您前进的内容。就像我上面说的那样，它真的不需要。有很多插件可以做到这一点。

标题定位，样式和浏览器窗口滚动

1 个答案: