WEB前端开发人员交流社区

搜索
查看: 791|回复: 0

[jQuery] Jquery实现弹幕效果

[复制链接]

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-3-9 16:44:41 | 显示全部楼层 |阅读模式
本来想用JS写弹幕效果的,但是碰到setInterval()的累加问题。唉,只能用Jquery写一个,不知道有没有Bug,有Bug的请给我留言。

[HTML] 纯文本查看 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    html,body{margin:0px;padding:0px;width: 100%;height:100%;font-family: "微软雅黑";font-size: 62.5%;background: #ccc;}
    .boxDom {
        width:100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    .idDom {
        width: 100%;
        height: 60px;
        background: #666;
        position: fixed;
        bottom: 0px;
    }
    .content {
        display: inline-block;
        width:430px;
        height: 40px;
        position: absolute;
        left: 0px;
        right: 0px;
        top:0px;
        bottom:0px;
        margin:auto;
    }
    .title {
        display: inline;
        font-size: 4em;
        vertical-align:bottom;
        color:#fff;
    }
    .text {
        border:none;
        width:300px;
        height: 30px;
        border-radius: 5px;
        font-size: 2.4em;
    }
    .btn {
        width:60px;
        height: 30px;
        background: #f90000;
        border:none;
        color:#fff;
        font-size: 2.4em;
    }
    .string {
        width:300px;
        height: 40px;
        position: absolute;
        overflow: hidden;
        color:#000;
        font-size: 4em;
        line-height: 1.5em;
        cursor: pointer;
        white-space:nowrap;
    }
</style>
</head>

<body>
<div class="boxDom" id="boxDom">
    <div class="idDom" id="idDom">
        <div class="content">
            <p class="title">吐槽:</p>
            <input type="text" class="text" id="text" />
            <button type="button" class="btn" id="btn">发射</button>
        </div>
    </div>
</div>
</body>
<script language="javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript">
   $(function(){
        var pageW=parseInt($(document).width());
        var pageH=parseInt($(document).height());
        var boxDom=$("#boxDom");
        var btnDom=$("#btn");
        var Top,Right;
        var width;
        width=pageW;
        var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
         btnDom.bind("click",auto);
        document.onkeydown=function(e){
            if(e.keyCode == 13){
                auto();
            }
        }
        function auto(){
            var creSpan=$("<span class='string'></span>");
            var text=$("#text").val();
            creSpan.text(text);
            $("#text").val("");
            Top=parseInt(pageH*(Math.random()));
            var num=parseInt(colorArr.length*(Math.random()));
            if(Top>pageH-90){
                Top=pageH-90;
            }
            creSpan.css({"top":Top,"right":-300,"color":getRandomColor()});
            boxDom.append(creSpan);
            var spanDom=$("#boxDom>span:last-child");
            spanDom.stop().animate({"right":pageW+300},10000,"linear",function(){
                        $(this).remove();
                    });
        }
        function getRandomColor(){
            return '#' + (function(h){
                return new Array(7 - h.length).join("0") + h
            })((Math.random() * 0x1000000 << 0).toString(16));
        }
   });
</script>
</html>

WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2020-11-26 23:46

快速回复 返回顶部 返回列表