滚动div结束后删除间隙

时间:2013-09-26 07:40:36

标签: jquery html css scroll

我试图一个接一个地显示div系列。它滚动得很好,但是在最后一个div离开屏幕后,只有第一个div进来。但是我需要在最后一个div之后立即使用我的第一个div滚动div而不留任何间隙。

我的代码

<script type="text/javascript">

var delayb4scroll=1000
var marqueespeed=1
var pauseit=1 
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
  if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+1))
    cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
  else
    cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
  cross_marquee=document.getElementById("vmarquee")
  cross_marquee.style.top=0
  marqueeheight=document.getElementById("marqueecontainer").offsetHeight
  actualheight=cross_marquee.offsetHeight
  if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    cross_marquee.style.height=marqueeheight+"px"
    cross_marquee.style.overflow="scroll"
    return
  }
  setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
  window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
  window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
  window.onload=initializemarquee
</script>

<div id="marqueecontainer" onmouseover="copyspeed=pausespeed" onmouseout="copyspeed=marqueespeed">
    <div id="vmarquee" style="position: absolute; width:243px;">
    <?php include 'viewdata.php';?>
    </div>

viewdata.php

    <?php    
    mysql_connect(gethostbyname(trim(`hostname`)) , ****, ****) or die ("Please check your server connection."); 
    mysql_select_db("****") or die("error");
    $query = "select * from table1";
    $result = mysql_query($query) or die (mysql_error());
    $num = mysql_numrows($result);
    $flags2=0;$flags=0;
    ?>
    <?php
    while($rows = mysql_fetch_array($result)) {
        $flags++;
    ?>
    <div class="marqueeElement" style="height:auto;width:220px;text-align:left;font-weight:normal;color: #BF5A14;font-size:70%;position:absolute;padding-left:10px;"> 
    <br><br><font style="font-weight:bold;color:#003399;">col 1 </font>
    <br><font style="font-weight:bold;color:#003399;">col 2 </font>         
</div>
<div style="height:150px;margin-left:-40px;color:#000000;font-weight:normal;">---------------------------------------------------<br></div>
    <?php } ?>
<font style="margin-left:-40px;color:#000000;font-weight:normal;">---------------------------------------------------</font>

viewdata.php从表中获取数据并将其打印到div

1 个答案:

答案 0 :(得分:0)

这是我的问题的解决方案,以删除空白区域(Atleast不会向您显示更长的时间空间,直到您不会留在该页面上。)

我刚刚更改了我的viewdata.php

<强> viewdata.php

<?php    
mysql_connect(gethostbyname(trim(`hostname`)) , ****, ****) or die ("Please check your server connection."); 
mysql_select_db("****") or die("error");
$query = "select * from table1";
$result = mysql_query($query) or die (mysql_error());
$num = mysql_numrows($result);
$flags2=0;$flags=0;$temp=400;
?>
<?php
while($rows = mysql_fetch_array($result)) {
$flags++;   


 ?>
    <div class="marqueeElement" style="height:auto;width:220px;text-align:left;font-weight:normal;color: #BF5A14;font-size:70%;position:absolute;padding-left:10px;"> 
    <br><br><font style="font-weight:bold;color:#003399;">print col 1 </font>
    <br><font style="font-weight:bold;color:#003399;">print col 2 </font>         
</div>
<div style="height:150px;margin-left:-40px;color:#000000;font-weight:normal;">---------------------------------------------------<br></div>
    <?php } ?>

<?php 

//to start the loop if table have more than 3 rows 

if($num > 3) {

while($temp > 0) {
$temp--;
 $query2 = "select * from table1";
    $result2 = mysql_query($query2) or die (mysql_error());
    $num2 = mysql_numrows($result2);
 while($rows = mysql_fetch_array($result2)) {   ?> 

 <div class="marqueeElement" style="height:auto;width:220px;text-align:left;font-weight:normal;color: #BF5A14;font-size:70%;position:absolute;padding-left:10px;"> 
    <br><br><font style="font-weight:bold;color:#003399;">print col 1 </font>
    <br><font style="font-weight:bold;color:#003399;">print col 2 </font>         
</div>
<div style="height:150px;margin-left:-40px;color:#000000;font-weight:normal;">---------------------------------------------------<br></div>


<?php  } } } ?>



<font style="margin-left:-40px;color:#000000;font-weight:normal;">---------------------------------------------------</font>