javascript - 怎么让一个DIV从屏幕的外侧穿过(弹幕效果)?
高洛峰
高洛峰 2017-04-10 17:21:42
[JavaScript讨论组]

代码可以实现弹幕的效果

但是弹幕出场的方式有点奇葩 聚成一团然后才慢慢舒展 有什么方法让弹幕的p从屏幕外穿过?

谢谢

        var _top = 0;
        $('body').html('

这就是一条弹幕这就是一条弹幕这就是一条弹幕这就是一条弹幕

'); var dm = $('#dm'); var _left = $(window).width(); var _height = $(window).height(); _top = _top + 76; if(_top >= _height - 100){ _top = 0; } dm.css({left:_left, top:_top, color:getReandomColor()}); var time=10000; if(dm.index() % 2 == 0){ time=15000; } dm.animate({left: "-"+_left+"px"}, time); function getReandomColor(){ return '#'+( function(h) { return new Array(7-h.length).join("0") + h } )((Math.random()*0x1000000<<0).toString(16)) }
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(3)
巴扎黑

吧所有弹幕放在一个p里面,根据发布时间和次序,使用position定位;p整体translateX,时间参照视频剩余时间;新提交弹幕同理根据视频播放剩余布置位置即可;

单独制作弹幕,每条动画;伤不起!!!(单条动画做过个项目,惨不忍睹;)

高洛峰

用css3中的animation和transform属性可以实现此效果
demo:demo

伊谢尔伦

慎用left和margin-left写动画的CSS效果,很影响性能,建议用transform:translateX()

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号