0
私は現在開発中のウェブサイトの水平および垂直スクロールを構築しています。縦型のものは問題なく動作しています。また、jqueryを組み込んでアニメーションを制御することもできました。 問題は水平スクロールにあります。それを制御するには、重要なデータが1つ必要です：div＃news1コンテンツの全長（関数 "mexer"の "comp"変数で使用する）。しかし、ブラウザは私にclientHeightを返します。これはコンテナ（div＃cont1）と同じです。ウェブサイトに動的データが挿入されているため（PHP）、これをブラウザが自動的かつ適切に生成する必要があります。 なぜこれが起こりますか？私は何を間違っているのですか？どうすれば修正できますか？ここで横型カスタムスクロール - 動作しません - div＃news1ブラウザで設定されていない合計幅
は、テストファイル用のコードです：
<!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>
は、事前にのをお願いします。
よろしくお願いいたします。
//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);
を行う場合、またはあなたにそれを使用します。それはあなたが望んでいたものだが、あなたはこのようにそれを行うことができます幅を取得/設定する
高さを得るためにその決して問題が、幅がはるかに難しいです。あなたは一緒に全体の幅を作る要素の幅と数を見つける必要があります。 –
それを機能させる方法を理解しています。しかし、あなたや誰かがなぜこれが起こるのか知っていますか？ – user1288892