RiPro主题和日主题如何实现网页滚动弹幕?使用barrager插件实现RiPro主题和日主题网页滚动弹幕

2020-06-21 161
下载不了?请联系网站客服提交链接错误!
增值服务:

RiPro主题和日主题如何实现网页滚动弹幕?使用barrager插件实现RiPro主题和日主题网页滚动弹幕

[rihide]ripro教程 在主题根目录下创建server.php文件,并上传到主题根目录下

$mode = intval($_GET[‘mode’]); $barrages = array(); foreach ($list as $value) { $info = substr_replace(get_user_by(‘id’, $value->user_id)->user_login, ‘**’, ‘2’) . ” 刚刚下载了 ” . mb_substr(get_the_title($value->post_id), 0, 8); $img = str_replace(‘http:’, ‘https:’, get_user_meta($value->user_id)[‘user_custom_avatar’][0]); $href = get_permalink($value->post_id); $new = array( ‘info’ => $info, ‘img’ => $img, ‘href’ => $href, ‘speed’ => 15, ‘color’ => ‘#fff’, ‘bottom’ => 70, ‘close’ => false ); array_push($barrages, $new); }; if ($mode === 1) { echo json_encode($barrages[array_rand($barrages)]); } elseif ($mode === 2) { echo json_encode($barrages); }

创建jquery.barrager.js文件,并上传到主题的assets/js文件下,js内容见下方代码

(function($){$.fn.barrager=function(barrage){barrage=$.extend({close:true,bottom:0,max:10,speed:8,color:”#fff”,old_ie_color:”#000000″},barrage||{});var time=new Date().getTime();var barrager_id=”barrage_”+time;var id=”#”+barrager_id;var div_barrager=$(”
“).appendTo($(this));var window_height=$(window).height()-100;var this_height=(window_height>this.height())?this.height():window_height;var window_width=$(window).width()+500;var this_width=(window_width>this.width())?this.width():window_width;var bottom=(barrage.bottom==0)?Math.floor(Math.random()*this_height+40):barrage.bottom;div_barrager.css(“bottom”,bottom+”px”);div_barrager_box=$(”
“).appendTo(div_barrager);if(barrage.img){div_barrager_box.append(“”);var img=$(“RiPro主题和日主题如何实现网页滚动弹幕?使用barrager插件实现RiPro主题和日主题网页滚动弹幕“).appendTo(id+” .barrage_box .portrait”);img.attr(“src”,barrage.img)}div_barrager_box.append(”
“);if(barrage.close){div_barrager_box.append(”
“)}var content=$(“”).appendTo(id+” .barrage_box .p”);content.attr({“href”:barrage.href,”id”:barrage.id}).empty().append(barrage.info);if(navigator.userAgent.indexOf(“MSIE 6.0”)>0||navigator.userAgent.indexOf(“MSIE 7.0”)>0||navigator.userAgent.indexOf(“MSIE 8.0”)>0){content.css(“color”,barrage.old_ie_color)}else{content.css(“color”,barrage.color)}var i=0;div_barrager.css(“margin-right”,0);$(id).animate({right:this_width},barrage.speed*1000,function(){$(id).remove()});div_barrager_box.mouseover(function(){$(id).stop(true)});div_barrager_box.mouseout(function(){$(id).animate({right:this_width},barrage.speed*1000,function(){$(id).remove()})});$(id+”.barrage .barrage_box .close”).click(function(){$(id).remove()})};$.fn.barrager.removeAll=function(){$(“.barrage”).remove()}})(jQuery);$.ajaxSettings.async=false;$.getJSON(“https://你的域名/wp-content/themes/ripro/server.php?mode=2”,function(data){var looper_time=5000;var items=data;var total=data.length;var run_once=true;var index=0;barrager();function barrager(){if(run_once){looper=setInterval(barrager,looper_time);run_once=false}$(“body”).barrager(items[index]);index++;if(index==total){clearInterval(looper);return false}}});

记得将js文件中的(网址)和(主题名)改为自己的正确路径,别忘了网址的http/https。 修改主题的header.php文件,引用刚刚创建的js文件,在主题前插入代码

在主题assets/css/diy.css文件里插入样式代码

.barrage{position: fixed;bottom:70px;right:-500px;display: inline-block;width: 500px;z-index: 99999} .barrage_box{background-color: rgba(0,0,0,.5);padding-right: 8px; height: 40px;display: inline-block;border-radius: 25px;transition: all .3s;} .barrage_box .portrait{ display: inline-block;margin-top: 4px; margin-left: 4px; width: 32px;height: 32px;border-radius: 50%;overflow: hidden;} .barrage_box .portrait img{width: 100%;height: 100%;} .barrage_box div.p a{ margin-right: 2px; font-size: 14px;color: #fff;line-height: 40px;margin-left: 18px; } .barrage_box div.p a:hover{text-decoration: underline;} .barrage_box .close{visibility: hidden;opacity: 0; text-align: center; width:25px;height: 25px;margin-left: 20px;border-radius: 50%;background:rgba(255,255,255,.1);margin-top:8px; background-image: url(close.png);} .barrage_box:hover .close{visibility:visible;opacity: 1;} .barrage_box .close a{display:block;} .barrage_box .close .icon-close{font-size: 14px;color:rgba(255,255,255,.5);display: inline-block;margin-top: 5px; } .barrage .z {float: left !important;} .barrage a{text-decoration:none;}

转载于https://www.aiqiyic.cn/2081.html[/rihide]

资源下载此资源下载价格为9999菜籽,请先
客服QQ:183920221
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1.本站部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
2.若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
3.如果本站有侵犯、不妥之处的资源,请在网站最右下方联系我们。将会第一时间解决。
4.本站所有内容均由互联网收集整理、网友上传,仅供大家参考、学习,不存在任何商业目的与商业用途。
5.本站提供的所有资源仅供参考学习使用,版权归原著所有,禁止下载本站资源参与商业和非法行为,请在24小时之内自行删除。

蔡某资源站 教程补丁 RiPro主题和日主题如何实现网页滚动弹幕?使用barrager插件实现RiPro主题和日主题网页滚动弹幕 https://czcawfi.cn/jcbd/259.html

常见问题
  • 客服QQ:183920221,资源站交流Q群:1106690319!
查看详情

相关文章

评论
暂无评论