0

現在開発中のウェブサイト用に水平および垂直スクローラーを構築しています。垂直のものは問題なくうまく機能しており、アニメーションを制御するために jquery を組み込むこともできました。問題は水平スクローラーにあります。それを制御するには、1 つの重要なデータが必要です: div#news1 コンテンツの全長 (関数 "mexer" の "comp" 変数で使用するため)。ただし、ブラウザーはコンテナー (div#cont1) と同じ clientHeight のみを返します。私のウェブサイトには動的データが挿入されているため（PHP）、これはブラウザによって自動的かつ適切に生成される必要があります。なぜこれが起こるのですか？私は何を間違っていますか？どうすれば修正できますか？

テストファイルのコードは次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="JS/jquery-1.7.2.min.js"></script>
<style type="text/css">

.container {
    width:250px;
    height:250px;
    overflow:hidden;
    float:left;
    border:3px solid #666;
}

.container1 {
    width:400px;
    height:125px;
    overflow:hidden;
    border:3px solid #666;
}
.botao {
    border:3px solid #666;
    background-color:#CCC;
    padding:3px 3px 3px 3px;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    cursor:pointer;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<div class="container" id="cont">
<div id="news" style="position:relative">
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
<p><img src="a6.jpg" height="125" width="250" /></p>
</div>
</div>
<p><span id="botao1" onClick="mexe(1)" class="botao">Para cima</span></p>
<p><span id="botao2" onClick="mexe(2)" class="botao">Para baixo</span></p>

<div class="container1" id="cont1" style="float:left">
<div id="news1" style="position:relative">
<div style="float:left"><img src="fotosdojoao/1.png" height="125" width="250"></div>
<div style="float:left"><img src="fotosdojoao/2.png" height="125" width="250"></div>
<div style="float:left"><img src="fotosdojoao/3.png" height="125" width="250"></div>
<div style="float:left"><img src="fotosdojoao/4.png" height="125" width="250"></div>
</div>
</div>
<p><span id="botao3" onClick="mexer(1)" class="botao">Esquerda</span></p>
<p><span id="botao4" onClick="mexer(2)" class="botao">Direita</span></p>
<script type="text/javascript">
var topo;
var baixo;
var avanco;
var altura;


function mexe(direcao)
{
    topo=Number(document.getElementById("news").style.top.substr(0,document.getElementById("news").style.top.length-2));
    baixo=Number(document.getElementById("news").style.top.substr(0,document.getElementById("news").style.bottom.length-2));
    avanco=Number(document.getElementById("cont").clientHeight);
    altura=Number(document.getElementById("news").clientHeight)-avanco+30;


if (direcao==1 && topo<0)
    {
        if((topo+avanco)>=0)
        {
            topo=0;
        }
        else
        {
        topo=topo+avanco;
        }
    //document.getElementById("news").style.top=topo+"px";
    }

if(direcao==2)
    {
        if((topo-avanco)*(-1)>=altura)
        {
            topo=altura*-1;
        }
        else
        {
        topo=topo-avanco;
        }
        //document.getElementById("news").style.top=topo+"px";
    }
}

$(document).ready(function()
  {
  $("#botao1").click(function(){
    $("#news").animate({top:topo+"px"},"normal","swing");
  });
  $("#botao2").click(function(){
    $("#news").animate({top:topo+"px"},"normal","swing");
  });
});



function mexer(direcao)
{
    esq=Number(document.getElementById("news1").style.left.substr(0,document.getElementById("news1").style.left.length-2));
    passagem=Number(document.getElementById("cont1").clientWidth);
    comp=Number(document.getElementById("news1").style.width.substr(0,document.getElementById("news1").style.width.length-2));
    maximo=comp-passagem+20;


if (direcao==1 && esq<0)
    {
        if((esq+passagem)>=0)
        {
            esq=0;
        }
        else
        {
        esq=esq+passagem;
        }
    document.getElementById("news1").style.left=esq+"px";
    }

if(direcao==2)
    {
        if((esq-passagem)*(-1)>=maximo)
        {
            esq=maximo*-1;
        }
        else
        {
        esq=esq-passagem;
        }
        document.getElementById("news1").style.left=esq+"px";
    }
}
</script>
</body>
</html>

前もって感謝します。

よろしくお願いします。

4

1 に答える 1

0

希望どおりかどうかはわかりませんが、幅を設定/取得するには、次のようにします。

//get width of an item
var itemWidth = $('#news1 > div:first').width();
//count number of items
var itemsCount = $('#news1 > div').length;
//width * count = width
var containerWidth = itemWidth * itemsCount;
alert(containerWidth);

直接設定できます

$('#news1').width(containerWidth);

または、スクロールするときに使用します。

それは英語ではないので、私はそれがどのように機能するかを理解するのに苦労しています：/

于 2012-04-13T11:50:14.373 に答える