Question

您好我已经成功地在css3中进行了一个选取框转换，它从我的网站和数据库滚动我的sql数据，但我唯一的问题是我希望它所以它下面永远不会有任何空间而且它可以随时继续请帮助下面是我的代码和css

提前致谢

  display:block;
  width: 500px;
  position:absolute;
  text-align: center;
  animation-name: marquee;
  -webkit-animation-name: marquee; 
  animation-duration: 60s;
  -webkit-animation-duration: 60s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count:infinite;
  animation-direction:normal;
  -webkit-animation-direction:normal;
    #marquee:hover {
    	-webkit-animation-play-state: paused;
        animation-play-state: paused;
    }

@keyframes marquee {
  from { top: 100%; }
  to { top: 0%; }
}
}

@-webkit-keyframes marquee {
    from {top: 100%;}
    to {top: 0%;}
 }

<div id="main">
        <div class="marquee">
          <?php
require('connect.php');
$run = mysql_query("SELECT * FROM comment ORDER BY id DESC");

	$numrows = mysql_num_rows($run);
	if($numrows > 0){
		while($row = mysql_fetch_assoc($run)){
		$dbname = $row['name'];
		$dbrating = $row['rating'];
		$dbwebsite = $row['website'];
		$dbservice = $row['service'];
        $dbdate = $row['postdate'];
		$dbcomment = $row['comment'];
		$newDate = date("l dS F Y", strtotime($dbdate));
?>			

<div id="commenttop">
 <div id="userdetails"><?php echo "{$dbname} - {$dbservice}" ?></div>
  <div id="rating">
  <?php 
if ($dbrating == 1) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" />';
}

if ($dbrating == 2) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';
}

if ($dbrating == 3) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';
}

if ($dbrating == 4) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';
}

if ($dbrating == 5) {
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" />';
}
?>
  </div>
</div>

<div id="commentbtm"><?php echo "$dbcomment"?>
<div id="date"><?php echo $newDate?></div>
</div>

<?php	
        }
	}
	else
		echo "No Comments Found";
?>

        </div>
        </div>

Answer 1

我无法使用css3找到或重新编码这个原始查询的解决方案，所以相反我决定使用Javascript，它确切地工作我也想要它:)对于那些可能有原始帖子的解决方案的人未来的参考请让我知道谢谢你下面你会找到我用于那些希望做同样好运的人的代码。

<script>
window.addEventListener('load', function () {
    function go() {
        i = i < height ? i + step : 1;
        m.style.marginTop = -i + 'px';
    }
    var i = 0,
        step = 3,
        space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
    var m = document.getElementById('marquee');
    var t = m.innerHTML; //text
    m.innerHTML = t + space;
    m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
    var height = (m.clientHeight + 1);
    m.style.position = '';
    m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
    m.addEventListener('mouseenter', function () {
        step = 0;
    }, true);
    m.addEventListener('mouseleave', function () {
        step = 3;
    }, true);
    var x = setInterval(go, 50);
}, true);
</script>

#marquee {
  border:1px solid #007df8;
  display:block;
  width: 500px;
  position:absolute;
  text-align: center;
}

<div id="main">  
        <div id="marquee"> 
        <div>  
          <?php  
require('connect.php');  
$run = mysql_query("SELECT * FROM comment ORDER BY id DESC");  

    $numrows = mysql_num_rows($run);  
    if($numrows > 0){  
        while($row = mysql_fetch_assoc($run)){  
        $dbname = $row['name'];  
        $dbrating = $row['rating'];  
        $dbwebsite = $row['website'];  
        $dbservice = $row['service'];  
        $dbdate = $row['postdate'];  
        $dbcomment = $row['comment'];  
        $newDate = date("l dS F Y", strtotime($dbdate));  
?>              

<div id="commenttop">  
 <div id="userdetails"><?php echo "{$dbname} - {$dbservice}" ?></div>  
  <div id="rating">  
  <?php   
if ($dbrating == 1) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" /><img src="images/star.png" alt="" width="20" height="20" />';  
}  

if ($dbrating == 2) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';  
}  

if ($dbrating == 3) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';  
}  

if ($dbrating == 4) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/star.png" width="20" height="20" />';  
}  

if ($dbrating == 5) {  
  echo '<img src="images/activestar.png" width="20" height="20" /> <img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" /><img src="images/activestar.png" width="20" height="20" />';  
}  
?>  
  </div>  
</div>  

<div id="commentbtm"><?php echo "$dbcomment"?>  
<div id="date"><?php echo $newDate?></div>  
</div>  

<?php      
        }  
    }  
    else  
        echo "No Comments Found";  
?>  
        </div> 
        </div>  
        </div>

制作永无止境的选框动画css3

1 个答案: