js 实现弹幕效果

最新推荐文章于 2024-07-10 14:03:37 发布

亨呢还要悟再谦虚点

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量502

点赞数 1

文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/u013194063/article/details/104873096

版权

效果图

注入灵魂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=id, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{ margin: 0; padding: 0;}
        #box{ width: 542px; height: 330px;
        border: 3px solid goldenrod;
        margin-left:300px;}
       #btm{margin: 0;padding: 0; height: 30px;background: goldenrod;
       display: flex; z-index: 999; position: relative; }
       #btm span{ flex: 1; flex-direction: column;font: 16px/30px "微软雅黑";
       color: #fff;  text-align: center; cursor: pointer;}
       #btm span:nth-child(1){ flex: 3;}
       #btm span input{ width:100% ; height: 30px; font: 16px/30px "微软雅黑";
       border: none; outline: none;}
       #content{ height: 300px; position: relative; z-index: 999;
       background:rgba(0,0,0,0.7)}
       #content span{color:#fff; height: 30px; font: 14px/30px "微软雅黑"; position: absolute;left:542px;
       white-space: nowrap;}
       #v{ position: absolute;
       left: 303px; top: -32px; width: 542px; height: 358px; background: url(2.png);}
    </style>
</head>
<body>
    <div id="box">
        <div id="content"></div>
        <p id="btm">
            <span><input type="text" id="text" /></span>
            <span id="sendCon">发送</span>
            <span id="hideCon">隐藏</span>
            <span id="showCon">显示</span>
        </p>
    </div>
    <div id="v"></div>
</body>
<script src="sport.js"></script>
<script>
    function $(id) {
        return document.getElementById(id)
    }
    // 封装一个函数，实现发送消息
    function sendMessage () {
        var oSpan = document.createElement('span');
        oSpan.innerHTML = $("text").value;
        $('content').appendChild(oSpan)

        oSpan.style.top = Math.floor(Math.random() * 280) + 'px'

        var oSpanWidth = oSpan.offsetWidth;
        startMove(oSpan,{"left": -oSpanWidth}, function(){
            oSpan.remove()
        })

        $("text").value = ''
        
    }

    // 鼠标发送按钮
    $('sendCon').onclick = function(){
        sendMessage();
    }

    // 键盘发送
    document.onkeydown = function (e) { // 回车提交表单
    // 兼容FF和IE和Opera
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            sendMessage();
        }
    }

    // 隐藏： 将运动得消息隐藏，背景图片亮度增强
    $('hideCon').onclick = function () {
        $('content').style.opacity = '0'
        $('content').style.filter = 'alpha(opacity=0)'  // 该方法IE特有 兼容IE8以下的浏览器
    }

    // 显示： 弹幕继续向前运动 背景图片变模糊
    $('showCon').onclick = function () {
        $('content').style.opacity = '1'
        $('content').style.filter = 'alpha(opacity=1)'  // 该方法IE特有 兼容IE8以下的浏览器
    }
</script>
</html>

sport.js

function startMove(obj,json,fn){  //  {"width":300,"height":300}
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var flag = true;// 当开关变量的值为 true时，运动结束，可以停止定时器了     
                for(var attr in json){      
                    var current = 0;
                    if(attr == "opacity"){
                        //操作透明度
                        debugger;
                        current = parseFloat( getStyle( obj,attr ) ) * 100;
                        console.log(current);
                    }else if( attr == "zIndex" ){
                        current = parseInt( getStyle(obj,attr) );//操作空间定位
                    }else{
                        
                        //操作的是带有像素值的样式
                        current = parseInt( getStyle(obj,attr) );//获取当前操作对象的实际值
                    }
                    var speed = (json[attr] - current) > 0 ? 1 : -1;
                    //speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
                    if( json[attr] != current ){
                        //如果目标值 和 当前操作的样式值不相等，就不能停止定时器 
                        flag = false;               
                    }
                    //上面的条件不满足  继续执行运动
                    if(attr == "opacity"){
                        //操作透明度
                        obj.style.opacity = (current + speed) / 100;
                    }else if(attr == "zIndex"){
                        
                        obj.style.zIndex = current+speed;
                        
                    }else{
                        //操作的是带有像素值的样式
                        obj.style[attr] = current + speed + "px";
                         
                    }       
                }       
                //如果flag为true   就停止定时器      
                if(flag){
                    clearInterval(obj.timer);
                    //一个动作完成后,进入下一个动作(也就是要调用下一个函数)
                    if(fn){ //判断如果有函数传递过来，就调用
                        fn();
                    }
                }
                
            },10)
        }
        function getStyle(obj,attr){
            return window.getComputedStyle ? window.getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
        }

亨呢还要悟再谦虚点

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js 实现弹幕效果

效果图注入灵魂<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=id, initial-scale=1.0"> <title>Documen...
复制链接

扫一扫