个人中心
gpt4 book ai didi

javascript - “ float 层”被困在 HTML 表格下方

转载 作者：行者123 更新时间：2023-11-28 08:26:55 25 4
gpt4 key购买 nike

我过去对基本的 HTML 有一点经验，但我对 .JS 和 .CSS 还是很陌生(抱歉)。

编辑:我也曾尝试搜索该网站，以确保之前没有人问过关于 float 层被页面上的其他元素卡住的问题(当它们在技术上应该 float 在它们之上时)；但我还没有找到任何东西。

我目前正在尝试为带有扩展表和我的第一个 float 层的 Android 平板电脑 (Galaxy Tab 3) 创建 HTML 电影目录，非常感谢其他用户的建议论坛(引用我之前的问题)以及我正在在线阅读的许多其他教程。

感谢到目前为止给我的所有建议；我已经稍微清理了我以前的草稿版本，我现在似乎在正确的轨道上(我希望!)，我的测试文件都在 Android 上工作(我越来越接近，谢天谢地!)

我的目标:
现在，因为我将在跟踪中进一步使用框架，所以我尝试尝试一个“ float 层”，它允许用户“跳转”到带有#href id 标签的长列表的某些部分，而不必滚动浏览10 英寸平板电脑上超过 1000 行。

我看过“ float 层”教程，即这个教程(由 Henrik Petersen 编写，非常棒):

http://www.echoecho.com/toolfloatinglayer.htm

但是，当我将完全相同的脚本应用到我的 list.html 时， float 层会卡在我展开的表格的底部并且不会移动。我不明白为什么(超出我的经验水平)。我看不出表格代码本身有什么问题。

我使用 Mozilla Firefox 在我的页面上运行了控制台检查，不幸的是我不明白读出的错误。它说“解析“左”和“上”值时出错。”但没有告诉我这些错误发生在何处，以便我修复它们。

有人可以帮忙吗？我离实现最终目标如此之近!

这是我的 index.HTML 文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Demo Expandable list</title>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">

<SCRIPT LANGUAGE="JavaScript">
<!--
floatX=10;
floatY=10;
layerwidth=100;
layerheight=130;
halign="right";
valign="bottom";
delayspeed=3;

// This script is copyright (c) Henrik Petersen, NetKontoret
// Feel free to use this script on your own pages as long as you do not change it.
// It is illegal to distribute the script as part of a tutorial / script archive.
// Updated version available at: http://www.echoecho.com/toolfloatinglayer.htm
// This comment and the 4 lines above may not be removed from the code.

NS6=false;
IE4=(document.all);
if (!IE4) {NS6=(document.getElementById);}
NS4=(document.layers);

function adjust() {
if ((NS4) || (NS6)) {
if (lastX==-1 || delayspeed==0)
{
lastX=window.pageXOffset + floatX;
lastY=window.pageYOffset + floatY;
}
else
{
var dx=Math.abs(window.pageXOffset+floatX-lastX);
var dy=Math.abs(window.pageYOffset+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
if (NS4){
document.layers['floatlayer'].pageX = lastX;
document.layers['floatlayer'].pageY = lastY;
}
if (NS6){
document.getElementById('floatlayer').style.left=lastX;
document.getElementById('floatlayer').style.top=lastY;
}
}
else if (IE4){
if (lastX==-1 || delayspeed==0)
{
lastX=document.body.scrollLeft + floatX;
lastY=document.body.scrollTop + floatY;
}
else
{
var dx=Math.abs(document.body.scrollLeft+floatX-lastX);
var dy=Math.abs(document.body.scrollTop+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
document.all['floatlayer'].style.posLeft = lastX;
document.all['floatlayer'].style.posTop = lastY;
}
setTimeout('adjust()',50);
}

function define()
{
if ((NS4) || (NS6))
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
}
if (IE4)
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
}
}
//-->
</script>

        <script type="text/javascript" src="js/jquery-1.4.2.min.js">
        </script>
        <script type="text/javascript" src="js/scripts.js">
        </script>

<style type="text/css">
.myTable { background-color:#000000;border-collapse:collapse; }
.myTable th { background-color:#000000;color:white; }
.myTable tr { background:#000000 url(img/back.png) repeat-x scroll top left; }
.myTable td, .myTable th { padding:0.5px;border:1px solid #666666; }
</style>

<style>
/* unvisited link */
a:link {
    color: #FFFFFF;
}

/* visited link */
a:visited {
    color: #FFFFFF;
}

/* mouse over link */
a:hover {
    color: #FF0000;
}

/* selected link */
a:active {
    color: #0000FF;
}
</style>

    </head>
    <body style="background-color:black">

<font face="Arial">
<center>
<table class="myTable">
    <tr style="color: #FFFFFF;"><td>+</td><td><p><a href="" target="_blank">Name</a></p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subs?</p></td><td><p>Length</p></td><td><p><a href="" target="_blank">Trailer</a></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
    <tr style="color: #FFFFFF;"><td colspan="10" padding:0px;><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr style="color: #FFFFFF;"><td>+</td><td><p><a href="" target="_blank">Name</a></p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subs?</p></td><td><p>Length</p></td><td><p><a href="" target="_blank">Trailer</a></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
    <tr style="color: #FFFFFF;"><td colspan="10"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr style="color: #FFFFFF;"><td>+</td><td><p><a href="" target="_blank">Name</a></p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subs?</p></td><td><p>Length</p></td><td><p><a href="" target="_blank">Trailer</a></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
    <tr style="color: #FFFFFF;"><td colspan="10"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr style="color: #FFFFFF;"><td>+</td><td><p><a href="" target="_blank">Name</a></p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subs?</p></td><td><p>Length</p></td><td><p><a href="" target="_blank">Trailer</a></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
    <tr style="color: #FFFFFF;"><td colspan="10"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr style="color: #FFFFFF;"><td>+</td><td><p><a href="" target="_blank">Name</a></p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subs?</p></td><td><p>Length</p></td><td><p><a href="" target="_blank">Trailer</a></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
    <tr style="color: #FFFFFF;"><td colspan="10"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr style="color: #FFFFFF;"><td>+</td><td><p><a href="" target="_blank">Name</a></p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subs?</p></td><td><p>Length</p></td><td><p><a href="" target="_blank">Trailer</a></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
    <tr style="color: #FFFFFF;"><td colspan="10"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>
</table>
</center>
</font>


<script>
if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}
if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+'; top:'+floatY+';">');}
</script>
 <center>
  <font color="white">
    <A HREF="javascript:history.go(0)">RELOAD</A> - <a href="#action">ACTION</a> - <a href="#adventure">ADVENTURE</a> - <a href="#animated">ANIMATED</a> - <a href="#biography">BIOGRAPHY</a> - <a href="#comedy">COMEDY</a> - <a href="#crime">CRIME</a> - <a href="#documentary">DOCUMENTARY</a> - <a href="#drama">DRAMA</a> - <a href="#fantasy">FANTASY</a> - <a href="#foreign">FOREIGN</a>
    <BR><a href="#historical">HISTORICAL</a> - <a href="#horror">HORROR</a> - <a href="#martial_arts">MARTIAL ARTS</a> - <a href="#musical">MUSICAL</a> - <a href="#romance">ROMANCE</a> - <a href="#sci_fi">SCI FI</a> - <a href="#stand_up">STAND UP COMEDY</a> - <a href="#superhero">SUPERHERO</a> - <a href="#thriller">THRILLER</a> - <a href="#war">WAR</a> - <a href="#western">WESTERN</a>
  </font>
 </center>

<script>
if (NS4)
{
document.write('</LAYER>');
}
if ((IE4) || (NS6))
{
document.write('</DIV>');
}
ifloatX=floatX;
ifloatY=floatY;
define();
window.onresize=define;
lastX=-1;
lastY=-1;
adjust();
</script>

    </body>
</html>

这是我的 style.CSS 文件:

table{ width: 98%; }
tr {border: 1px solid #666666;}

.scroll-wrapper{
    border: 1px solid black;
    width: 200px;
    overflow-x: scroll;
    /*making the scroll have momentum on mobile devices
    http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements
    */
    -webkit-overflow-scrolling: touch;

}
/*hiding the scrollbar*/
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
 }


a:link {
    text-decoration: none;
}

#header a:hover {
    text-decoration: none;
}

img {
    float: left;
    margin: 0 20px 20px 0;
}

p {
    text-align: justify;
    text-indent: 0em;
}

这是我的 scripts.JS 文件:

$(function() {
    $("td[colspan=10]").find("p").hide();
    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
            $target.closest("tr").prev().find("td:first").html("+");
        } else {
            $target.closest("tr").next().find("p").slideToggle();
            if ($target.closest("tr").find("td:first").html() == "+")
                $target.closest("tr").find("td:first").html("-");
            else
                $target.closest("tr").find("td:first").html("+");                
        }                    
    });
});

抱歉，如果它仍然有点困惑，我会尽可能多地从中学习并改进，我已经尝试了一个星期了。我没有上这方面的任何类(class)，所以这一切都是自学和逆向设计的，都是由比我了解更多的人进行的。

关于我的一些信息:我实际上是一名建筑绘图员，我使用 AutoCAD 起草施工计划；所以对我来说任何计算机编程都是未知的。不过，我确实认为 HTML 很漂亮。

这次我省略了所有照片以避免混淆。在开始使用与我相关的有用信息填充所有行之前，我只是想让代码正常工作。

提前致谢，感谢任何能读懂我的烂摊子并发现缺陷的人!

最佳答案

我已经创建了一个粗略的布局，检查一下，让我知道您还想要什么。

http://jsbin.com/goyepuhifo/1/edit

关于javascript - “ float 层”被困在 HTML 表格下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28492443/

25 4 0
文章推荐： javascript - 根据事件有条件地阻止事件删除
文章推荐： css - 如何使用 background-position 制作响应式图片
文章推荐： javascript - 如何使jquery日历不从系统中选择当前日期
文章推荐： javascript - 更改警报框的高度和宽度？
行者123
个人简介

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

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