JS弹幕滚动效果_HTML5跑马灯代码
2017-08-08 13:24:36  By: dwtedx

分享一个简单实用 javascript 弹幕特效、一个很好用的实例、很适合放到项目里面使用、完全使用 javascript 编写完成、没有使用 jQuery 等插件、非常适合新手学习、效果图如下

js弹幕滚动效果


插入function

function insert(){
    var newli=document.createElement(´div´);
    var randomS=Math.floor(Math.random()*8);
    var r=Math.floor(Math.random()*266);
    var g=Math.floor(Math.random()*266);
    var b=Math.floor(Math.random()*266);
    newli.innerHTML=speak[randomS];
    newli.className=´newli´;
    newli.style.color=´rgb(´ r ´,´ g ´,´ b ´)´;
    var t=winH-50;
    var newliT=Math.floor(Math.random()*(t-1));
    var newliL=danmu.clientWidth;
    newli.style.left=newliL ´px´;
    newli.style.top=newliT ´px´;
    danmu.appendChild(newli);
    move(newli);
}


移动function

function move(obj){
var timer1=setInterval(function(){
    // var danmu=document.getElementById(´danmu´);
    var newliW=obj.clientWidth;
    var run=obj.offsetLeft;
    run--;
    if (run<=-newliW) {
        danmu.removeChild(obj);
        clearInterval(timer1);
    }
    obj.style.left=run ´px´;
},1)
}


完整Demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿弹幕效果</title>
    <style>
    *{margin: 0;padding: 0;list-style: none;}    
    html,body{width: 100%;height: 100%;}
    body{background-color: #000;font-family: ´微软雅黑´;}
    #danmu{position: relative;height: 100%;width: 100%;overflow: hidden;font-size: 50px;}
    #danmu .newli{background-color: #000;height: 50px;line-height: 50px;position: absolute;overflow: hidden;}
    </style>
</head>
<body>
    <div id="danmu"></div>
    <script>
        var danmu=document.getElementById(´danmu´);
        var winH=danmu.clientHeight;
        var speak=[´哇塞好牛逼啊´,´好帅啊´,´前方高能´,´hahahahaha´,´哈哈哈哈´,´风流倜傥´,´我爱你阿啊啊啊´,´哈哈哈´];
        function insert(){
            var newli=document.createElement(´div´);
            var randomS=Math.floor(Math.random()*8);
            var r=Math.floor(Math.random()*266);
            var g=Math.floor(Math.random()*266);
            var b=Math.floor(Math.random()*266);
            newli.innerHTML=speak[randomS];
            newli.className=´newli´;
            newli.style.color=´rgb(´ r ´,´ g ´,´ b ´)´;
            var t=winH-50;
            var newliT=Math.floor(Math.random()*(t-1));
            var newliL=danmu.clientWidth;
            newli.style.left=newliL ´px´;
            newli.style.top=newliT ´px´;
            danmu.appendChild(newli);
            move(newli);
        }
        function move(obj){
            var timer1=setInterval(function(){
                // var danmu=document.getElementById(´danmu´);
                var newliW=obj.clientWidth;
                var run=obj.offsetLeft;
                run--;
                if (run<=-newliW) {
                    danmu.removeChild(obj);
                    clearInterval(timer1);
                }
                obj.style.left=run ´px´;
            },1)
         }
         // insert();
        var timer2=setInterval(function(){
             insert();
         },1000);
        window.onfocus=function (){
            clearInterval(timer2);
            timer2=setInterval(function(){
                insert();
            },1000);
        }
        window.onblur=function (){
            clearInterval(timer2);
        }
    </script>
</body>
</html>


若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+