折翼天使资源社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 145|回复: 7

[CMS类教程] 【Ripro主题美化】RiPro主题/日主题网页滚动弹幕下载信息特效代码修改教程

[复制链接]

1万

主题

1万

帖子

150

积分

网站编辑

Rank: 8Rank: 8

天使之心
0
注册时间
2013-8-22
发表于 2020-1-26 14:32:24 | 显示全部楼层 |阅读模式
演示截图:

1.jpg

1.RiPro修改教程如下:
在主题根目录下创建server.php文件,并上传到主题根目录下
  1. <?php
  2. /*!
  3. *[url=home.php?mod=space&uid=27109]@name[/url]     server.php
  4. *@project  jquery.barrager.js
  5. *@des      RiPro弹幕插件服务端
  6. *@author   Ernie
  7. *@url      https://www.xiaobaidaxue.com
  8. */
  9. require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-config.php');
  10. require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-includes/wp-db.php');
  11. $list = $wpdb->get_results("SELECT * FROM $paylog_table_name WHERE status =1 ORDER BY pay_time DESC limit 10");
  12. $mode = intval($_GET['mode']);
  13. $barrages = array();
  14. foreach ($list as $value) {
  15.   $info = substr_replace(get_user_by('id', $value->user_id)->user_login, '**', '2') . " 刚刚下载了 " . mb_substr(get_the_title($value->post_id), 0, 8);
  16.   $img = str_replace('http:', 'https:', get_user_meta($value->user_id)['user_custom_avatar'][0]);
  17.   $href = get_permalink($value->post_id);
  18.   $new = array(
  19.     'info'   => $info,
  20.     'img'   => $img,
  21.     'href'   => $href,
  22.     'speed'   => 15,
  23.     'color'  =>  '#fff',
  24.     'bottom'  => 70,
  25.     'close'  => false
  26.   );
  27.   array_push($barrages, $new);
  28. };
  29. if ($mode === 1) {
  30.   echo json_encode($barrages[array_rand($barrages)]);
  31. } elseif ($mode === 2) {
  32.   echo json_encode($barrages);
  33. }
复制代码
创建jquery.barrager.js文件,并上传到主题的assets/js文件下,js内容见下方代码
  1. (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=$("<div class='barrage' id='"+barrager_id+"'></div>").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=$("<div class='barrage_box cl'></div>").appendTo(div_barrager);if(barrage.img){div_barrager_box.append("<a class='portrait z' href='javascript:;'></a>");var img=$("<img src='' >").appendTo(id+" .barrage_box .portrait");img.attr("src",barrage.img)}div_barrager_box.append(" <div class='z p'></div>");if(barrage.close){div_barrager_box.append(" <div class='close z'></div>")}var content=$("<a title='' href='' target='_blank' rel="noopener noreferrer"></a>").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文件,在主题前插入代码
  1. <script type='text/javascript' src='https://www.你的域名/wp-content/themes/ripro/assets/js/jquery.barrager.js'></script>
复制代码
在主题assets/css/diy.css文件里插入样式代码
  1. .barrage{position: fixed;bottom:70px;right:-500px;display: inline-block;width: 500px;z-index: 99999}
  2. .barrage_box{background-color: rgba(0,0,0,.5);padding-right: 8px; height: 40px;display: inline-block;border-radius: 25px;transition: all .3s;}
  3. .barrage_box .portrait{ display: inline-block;margin-top: 4px; margin-left: 4px; width: 32px;height: 32px;border-radius: 50%;overflow: hidden;}
  4. .barrage_box .portrait img{width: 100%;height: 100%;}
  5. .barrage_box div.p a{ margin-right: 2px; font-size: 14px;color: #fff;line-height: 40px;margin-left: 18px; }
  6. .barrage_box div.p a:hover{text-decoration: underline;}
  7. .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);}
  8. .barrage_box:hover .close{visibility:visible;opacity: 1;}
  9. .barrage_box .close a{display:block;}
  10. .barrage_box .close .icon-close{font-size: 14px;color:rgba(255,255,255,.5);display: inline-block;margin-top: 5px; }
  11. .barrage .z {float: left !important;}
  12. .barrage  a{text-decoration:none;}
复制代码

2.日主题修改教程如下:
在主题根目录下创建server.php文件,并上传到主题根目录下
  1. <?php
  2. /*!
  3. *@name     server.php
  4. *@project  jquery.barrager.js
  5. *@des      日主题弹幕插件
  6. *@author   Ernie
  7. *@url      https://www.xiaobaidaxue.com
  8. */
  9. require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-config.php');
  10. require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-includes/wp-db.php');
  11. $list = $wpdb->get_results("SELECT * FROM $wppay_table_name ORDER BY create_time DESC limit 10");
  12. $mode = intval($_GET['mode']);
  13. $barrages = array();
  14. foreach ($list as $value) {
  15.   if ($value->post_id != 0) {
  16.     $info = substr_replace(get_user_by('id', $value->user_id)->user_login, '**', '2') . " 刚刚下载了 " . mb_substr(get_the_title($value->post_id), 0, 8);
  17.     $href = get_permalink($value->post_id);
  18.   } else {
  19.     $info = substr_replace(get_user_by('id', $value->user_id)->user_login, '**', '2') . " 刚刚开通了 VIP";
  20.     $href = home_url('/user?action=vip');
  21.   }
  22.   $img = str_replace('http:', 'https:', get_user_meta($value->user_id)['photo'][0]);
  23.   $new = array(
  24.     'info'   => $info,
  25.     'img'   => $img,
  26.     'href'   => $href,
  27.     'speed'   => 15,
  28.     'color'  =>  '#000',
  29.     'bottom'  => 70,
  30.     'close'  => false
  31.   );
  32.   array_push($barrages, $new);
  33. };
  34. if ($mode === 1) {
  35.   echo json_encode($barrages[array_rand($barrages)]);
  36. } elseif ($mode === 2) {
  37.   echo json_encode($barrages);
  38. }
复制代码
创建jquery.barrager.js文件,并上传到主题的js/文件下,js内容见下方代码
  1. (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=$("<div class='barrage' id='"+barrager_id+"'></div>").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=$("<div class='barrage_box cl'></div>").appendTo(div_barrager);if(barrage.img){div_barrager_box.append("<a class='portrait z' href='javascript:;'></a>");var img=$("<img src='' >").appendTo(id+" .barrage_box .portrait");img.attr("src",barrage.img)}div_barrager_box.append(" <div class='z p'></div>");if(barrage.close){div_barrager_box.append(" <div class='close z'></div>")}var content=$("<a title='' href='' target='_blank' rel="noopener noreferrer"></a>").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://www.你的域名/wp-content/themes/rizhuti/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文件,在主题前插入代码
  1. <script type='text/javascript' src='https://www.你的域名/wp-content/themes/rizhuti/js/jquery.barrager.js'></script>
复制代码
在主题style.css文件里插入样式代码
  1. .barrage{position: fixed;bottom:70px;right:-500px;display: inline-block;width: 500px;z-index: 99999}
  2. .barrage_box{background-color: rgba(0,0,0,.5);padding-right: 8px; height: 40px;display: inline-block;border-radius: 25px;transition: all .3s;}
  3. .barrage_box .portrait{ display: inline-block;margin-top: 4px; margin-left: 4px; width: 32px;height: 32px;border-radius: 50%;overflow: hidden;}
  4. .barrage_box .portrait img{width: 100%;height: 100%;}
  5. .barrage_box div.p a{ margin-right: 2px; font-size: 14px;color: #fff;line-height: 40px;margin-left: 18px; }
  6. .barrage_box div.p a:hover{text-decoration: underline;}
  7. .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);}
  8. .barrage_box:hover .close{visibility:visible;opacity: 1;}
  9. .barrage_box .close a{display:block;}
  10. .barrage_box .close .icon-close{font-size: 14px;color:rgba(255,255,255,.5);display: inline-block;margin-top: 5px; }
  11. .barrage .z {float: left !important;}
  12. .barrage  a{text-decoration:none;}
复制代码
游客,如果您要查看本帖隐藏内容请回复

本站统一解压密码:www.zheyitianshi.com

0

主题

2

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-1-26
发表于 2020-1-26 14:55:14 | 显示全部楼层
kk hhhhkankn
本站统一解压密码:www.zheyitianshi.com
匿名  发表于 2020-1-27 22:21:34
RiPro主题/日主题网页滚动弹幕下载信息特效代码修改教程
本站统一解压密码:www.zheyitianshi.com

0

主题

5

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2019-5-21
发表于 2020-2-1 01:26:30 | 显示全部楼层
已经发货继父回家发货
本站统一解压密码:www.zheyitianshi.com

3

主题

326

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2015-5-29
发表于 2020-2-11 20:24:54 | 显示全部楼层
RiPro主题/日主题网页滚动弹幕下载信息特效代码修改教程
本站统一解压密码:www.zheyitianshi.com

0

主题

8

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-2
发表于 2020-2-18 23:52:45 | 显示全部楼层
题/日主题网页滚动弹幕下载信息
本站统一解压密码:www.zheyitianshi.com

0

主题

3

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-29
发表于 2020-2-29 11:23:30 | 显示全部楼层
功能挺多的哦。。
本站统一解压密码:www.zheyitianshi.com

0

主题

8

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2019-12-6
发表于 2020-3-8 11:59:22 | 显示全部楼层
大佬十分感谢
本站统一解压密码:www.zheyitianshi.com

QQ|手机版|小黑屋|折翼天使资源社区

GMT+8, 2020-3-30 04:51 , Processed in 0.079780 second(s), 26 queries .

申明:本站资源均来自互联网公开的网络收集整理及二次开发发布,若侵犯了您的合法权益,请告知我们妥善处理。

© 2001-2020 www.zheyitianshi.com 折翼天使资源社区管理团队

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