用Jquery+CSS实现网页弹幕

最新推荐文章于 2024-07-16 16:43:05 发布

diyuan4452

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量123

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lihongjunjava/p/8608693.html

版权

实现效果：

Html<html>

<head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<style>
    body{
        margin: 0;
        width:100%;
        height:100%;
    }
    .box{
　　　　width: 100%;　　
　　　　height:80%;
　　　　z-index: 50;
　　}

    .show{
　　　　　top:0;
　　　　　left:0;
        width: 100%;
        height:50%;
        opacity:0.9;//改变值可以改变弹幕的透明度
　　　　　z-index:100;//实际上就是两个div，一个在上显示，一个在下显示，z-index就是设置显示的优先级，值越大优先级越高

    }
    span{
        position: absolute;
        font-size: 20px;
    }
</style>

<body>
    <div class="box">
        <div class="show"></div>
    </div>

    <div>
        <input type="text" id="msg">
        <button id="send">发送</button>
    </div>
</body>
</html>

JS：

$(function () {
    $('#send').click(sendMsg);
});
function sendMsg() {
    var msg=$('#msg').val();
    var span="<span style='color:"+getColor()+";right:0;top:"+getTop()+"; '>"+msg+"</span>";
    span=$(span);
    $('.show').append(span);
　　　//动画效果
    span.stop().animate({'right':getRight(span)},8000,'linear',function () {
        $(this).remove();
    });

}
//获取随机字体颜色
function getColor() {
    var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
    var index=parseInt(colorArr.length*Math.random());
    return colorArr[index];
}
//获取弹幕出现的随机高度位置
function getTop() {
    var pageH=parseInt($('.show').height());
    var top=parseInt(pageH*Math.random());
    if (top>=pageH-20){
        top=top-20;
    }
    return top;
}
//获取动画的宽度最大值
function getRight(span) {
    var width=span.width();
    var pageW=parseInt($('.show').width());
    var w=pageW-width;
    return w;
}

转载于:https://www.cnblogs.com/lihongjunjava/p/8608693.html

diyuan4452

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Jquery+CSS实现网页弹幕

实现效果：Html<html><head> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/index.js"></script></...
复制链接

扫一扫