<!DOCTYPE html>
<?php
$text="秒知正在测试中，你觉得这种滚动方式如何呢？ 创客七户社将在某月某日开展一个有趣的活动，欢迎参加。";
$cnt = 50;
?>
<html>
<body style="padding-left: 50px; padding-top: 50px;">
<!--
<marquee scrollamount="20" style="font-size: 30px; width:180px; border:1px solid #000000;"><?php echo $text; ?></marquee><br/>
-->
<?php for($i=1;$i<=6;++$i){ ?>
<canvas id="c<?php echo $i;?>" width="720" height="160" style="border:1px solid #000000; margin-right: 100px;"></canvas>
<?php
if($i%2==0){echo ‘<br/><br/><br/><br/>‘;}
} ?>
</body>
<script>
function roll(id, STEP, DELAY){
var text = "<?php echo $text;?>" ;
var cnt = <?php echo $cnt;?> ;
var canvas = document.getElementById(id);
var ctx = canvas.getContext("2d");
ctx.font = "120px Microsoft Yahei";
var idx=0;
setInterval(function(){
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.fillText(text,6*120-idx,128);
idx = (idx + STEP) % ((cnt+6)*120);
}, DELAY);
}
roll(‘c1‘, 2*60, 100);
roll(‘c2‘, 2*30, 50);
roll(‘c3‘, 2*6, 10);
roll(‘c4‘, 2*60, 130);
roll(‘c5‘, 2*60, 80);
roll(‘c6‘, 2*60, 70);
</script>
</html>
时间： 2024-08-05 03:43:56