js文字滚动 

<!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>

 

<!DOCTYPE html>
<html>
<style>
body {
    padding: 100px;
}
#main {
    overflow: hidden;
    height: 150px;
}
li {
    list-style-type: none;
    font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif !important;
    font-size: 50px;
    padding-bottom: 10px;
}
</style>
<body>
    <div id="main"><div id="inner"></div></div>
</body>
<script type="text/javascript" src="/js/jquery-3.1.0.min.js" ></script>
<script>
function roll(id){
    var text = "秒知正在测试中，你觉得这种滚动方式如何呢？创客七户社将在某月某日开展一个有趣的活动，欢迎参加。秒知正在测试中，你觉得这种滚动方式如何呢？创客七户社将在某月某日开展一个有趣的活动，欢迎参加。秒知正在测试中，你觉得这种滚动方式如何呢？创客七户社将在某月某日开展一个有趣的活动，欢迎参加。";
    var $ul = $("#inner");
    var i=0;
    while(i<text.length){
        $("<li></li>").text(text.substr(i, 6)).appendTo($ul);
        i+=6;
    }
    setInterval(function(){
        $("#inner")
                //.animate({'opacity':'0'}, 100)
                .css({"margin-top":'-=75px'})
                //.animate({'opacity':'1'}, 100);
    }, 6*120*0.9);
}
roll('c1');
</script>
</html>

 

posted @ 2016-09-03 18:25  fzyzcjy  阅读(403)  评论(0)    收藏  举报