Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>虚拟包厢</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <script>!function(d){var c=d.document;var a=c.documentElement;var b=d.devicePixelRatio;var f;function e(){var h=a.getBoundingClientRect().width,g;if(b===1){h=720}g=h/10;a.style.fontSize=g+"px"}if(b>2){b=3}else{if(b>1){b=2}else{b=1}}a.setAttribute("data-dpr",b);d.addEventListener("resize",function(){clearTimeout(f);f=setTimeout(e,200)},false);e()}(window);</script>
    <link rel="stylesheet" type="text/css" href="css/party.css">
</head>
<body ontouchstart="">
  css3 竖向滚动弹幕实例
    <div class="party-info">
        <div class="pi-name">
            <h3>音乐-百度(六一店)</h3>
            <p>包厢成员: 8</p>
        </div>
        <div class="pi-avatar">
            <div class="pi-avatar-inner"><!--计算 img+margin 总宽-->
                <img src="http://img.xiami.net/images/collect/17/17/10912017_1334743235_2.jpg" alt=""><img src="http://img.xiami.net/images/collect/17/17/10912017_1334743235_2.jpg" alt=""><img src="http://img.xiami.net/images/collect/17/17/10912017_1334743235_2.jpg" alt=""><img src="http://img.xiami.net/images/collect/17/17/10912017_1334743235_2.jpg" alt="">
            </div>
        </div>
    </div>
    <div class="party-danmu">
        <div class="pd-wrapper">
            <div class="pd-list">
                <div class="pd-inner">
                    <img class="pd-avatar" src="http://img.xiami.net/images/collect/17/17/10912017_1334743235_2.jpg" alt="">
                    <div class="pd-con">
                        <p class="name">轻舞飞扬<span>13:20:20</span></p>
                        <p class="content">你们玩得太嗨了吧！hahah</p>
                    </div>
                </div>
            </div>
            <div class="pd-list">
                <div class="pd-inner">
                    <img class="pd-avatar" src="http://img.xiami.net/images/collect/17/17/10912017_1334743235_2.jpg" alt="">
                    <div class="pd-con">
                        <p class="name">轻舞飞扬<span>13:20:20</span></p>
                        <p class="content">你们玩得太嗨了吧！hahah</p>
                    </div>
                </div>
            </div>
            <div class="pd-list">
                <div class="pd-inner">
                    <img class="pd-avatar" src="http://img.xiami.net/images/collect/17/17/10912017_1334743235_2.jpg" alt="">
                    <div class="pd-con">
                        <p class="name">轻舞飞扬<span>13:20:20</span></p>
                        <p class="content">发了一张图片</p>
                    </div>
                    <img class="pd-pic" src="http://img.xiami.net/images/collect/17/17/10912017_1334743235_2.jpg">
                </div>
            </div>
            <div class="pd-list">
                <div class="pd-inner">
                    <img class="pd-avatar" src="http://img.xiami.net/images/collect/17/17/10912017_1334743235_2.jpg" alt="">
                    <div class="pd-con">
                        <p class="name">轻舞飞扬<span>13:20:20</span></p>
                        <p class="content">你们玩得太嗨了吧！121</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="pd-cache">
            <div class="pd-list" style="visibility: hidden">
                <div class="pd-inner">
                    <img class="pd-avatar" src="http://img.xiami.net/images/collect/17/17/10912017_1334743235_2.jpg" alt="">
                    <div class="pd-con">
                        <p class="name">轻舞飞扬<span>13:20:20</span></p>
                        <p class="content">你们玩得太嗨了吧！121</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="party-bottom">
        <a href="javascript:;" class="pb-comment"></a>
    </div>
    <div class="party-input">
        <input type="text" class="pi-txt">
        <a href="javascript:;" class="pi-btn">发送</a>
    </div>
    <script type="text/javascript">
        $('.pb-comment').on('click',function(e){
            $(this).hide();
            $('.party-input').show().find('.pi-txt').focus();
            e.stopPropagation();
        }); 
        $('body').on('touchend',function(){
            $('.party-input').hide().find('.pi-txt').blur();
            $('.pb-comment').show();
        });
        $('.party-input').on('touchend',function(e){
            e.stopPropagation();
        });
​
        var cacheList = $('.pd-cache');
​
        setInterval(function(){
            cacheList.html('<div class="pd-list"><div class="pd-inner">\
                <img class="pd-avatar" src="http://img.xiami.net/images/collect/17/17/10912017_1334743235_2.jpg" alt="">\
                <div class="pd-con">\
                    <p class="name">轻舞飞扬<span>13:20:20</span></p>\
                    <p class="content">你们玩得太嗨了吧！你们玩得太嗨了</p>\
                </div>\
            </div></div>');
​
            var h = 0;
            var i = cacheList.find('.pd-list').length;
            cacheList.find('.pd-list').each(function(){
                h = h + $(this).height();
            });
            $('.pd-wrapper .pd-list:lt('+i+')').addClass('hide');
            $('.pd-list').css({'-webkit-transform':'translate(0,-'+(h+8)+'px)','-webkit-transition': '-webkit-transform .5s linear'});
            setTimeout(function(){
                $('.pd-wrapper').append('<div class="pd-list"><div class="pd-inner">\
                    <img class="pd-avatar" src="http://img.xiami.net/images/collect/17/17/10912017_1334743235_2.jpg" alt="">\
                    <div class="pd-con">\
                        <p class="name">轻舞飞扬<span>13:20:20</span></p>\
                        <p class="content">你们玩得太嗨了吧！你们玩得太嗨了</p>\
                    </div>\
                </div></div>');
                cacheList.html('');
                $('.pd-wrapper .pd-list:lt('+i+')').remove();
                $('.pd-list').removeAttr('style');
            },500);     
        },1000);
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
safaringpro
0viewers