继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

你不一定知道的关于jQuery弹幕插件有趣玩法

weibo_凌风0风灵_0
关注TA
已关注
手记 4
粉丝 2
获赞 311

昨天晚上玩到11点,玩的精疲力尽。果然,大三不考研,天天像过年。
从11点弄到1点,做出了一个十分酷炫的网页特效,更重要的是,适配绝大部分浏览器,适配响应式,而且十分简单易用。
我自己都有些佩服我自己了,嘿嘿,骄傲一下。
这个效果,就是大家经常在网上见到的弹幕效果;不过与视频弹幕不同,这个是网页弹幕。
效果图如下:
图片描述


嘿嘿,挺酷吧?
这个最常见的应用就是网站评论系统。

当然,写出来的这个jQuery当然不能和那些商业插件强大的功能相提并论,但胜在简单实用:你只需要为插件主函数提供相应格式的JSON数据即可,就能够形成这高大上的效果。
例如:
图片描述


这是我通过ajax获取到JSON数据后,进行操作的例子。

最后,晕代码:

;(function($){
    $.extend({
        'simpleBarrage':function(options){
            options = $.extend({
                'container':'#barrage',
                'imgSelector':'.barrage-img',
                'bodySelector':'.barrage-body',
                'data':'[]',
                'urlKey':'url',
                'txtKey':'txt',
                'speed':10,
            },options);

            $('<style></style>',{type:'text/css'})
            .html(options.container+'>div'+'{'+
                    'min-width: 180px;'+
                    'height: 50px;'+
                    'background: rgba(180,180,180,0.5);'+
                    'float: left;'+
                    'position: fixed;'+
                    'border-radius:8px;'+
                    'padding-left: 5px;'+ 
                    'padding-right: 5px;}'+
                options.imgSelector+'{'+
                    'width: 45px;'+
                    'height: 50px;'+
                    'float: left;}'+
                options.imgSelector+'>img{'+
                    'width: 45px;'+
                    'height: 45px;}'+
                options.bodySelector+'{'+
                    'min-width: 130px;'+
                    'height: 50px;'+
                    'line-height: 50px;'+
                    'float: right;'+
                    'margin-left: 5px;}')
            .appendTo('head');
            //'[{"url":"image/face/face0.png","txt":"hello"}]'
            var dataArr = JSON.parse(options.data);
            var count = 0;
            function initBarrage(div)
            {
                var curX = -$(div).width();
                var curY = Math.random()*($(window).height()-$(div).height());
                $(div).css('transition','none').css('z-index','9999');
                $(div).css('top',curY+'px').css('right',curX+'px');
                setTimeout(function(){
                    $(div).css('width',($(div).width())+'px');
                }, 100);
                var timmer = setInterval(function(){
                    curX+=1;
                    console.log(curX);
                    if(curX==0) {
                        showBarrage();
                    }
                    if(curX==$(window).width()) {
                        $(div).remove();
                        clearInterval(timmer);
                    }
                    $(div).css('top',curY+'px').css('right',curX+'px');
                }, options.speed);  
            }
            function createBarrage(imgurl,txt)
            {
                var divTxt = '<div><div class="'+options.imgSelector.substring(1)+'"><img src="'+imgurl+'" /></div><div class="'+options.bodySelector.substring(1)+'">'+txt+'</div></div>';
                $(options.container).append(divTxt);
                initBarrage($(options.container+'>div').get($(+options.container+'>div').length-1));
            }
            function showBarrage()
            {
                if(count<dataArr.length){
                    createBarrage(dataArr[count][options.urlKey],dataArr[count][options.txtKey]);
                    count++;
                }
            }
            showBarrage();
        },
    });
})(jQuery);

去玩啦,白白!

打开App,阅读手记
23人推荐
发表评论
随时随地看视频慕课网APP

热门评论

这个是怎么用的,单纯按照上面的代码,还是实现不了!

能不能给完整的代码呀?  只是片段能实现??


虽然看不懂,很棒!输给师弟师妹了

查看全部评论