影子江湖分享的打赏赞助文件提取二段代码怎么实现效果，代码高手指点下 New

哥斯拉 · 发表于 2024-4-2 07:32:33

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

这二天把使用教程中影子江湖分享的打赏赞助文件的首页文件，提取二段代码可怎么也实现不了效果，请代码高手指点下。

第一段，我是直接放在会员边栏会员图像那个位置：
<div class="jitheme_slide_d_m">
                        <div class="mini-stats-desc b2-radius">
                                    <li> <a href="#" class="jitheme-dt"><img src="images/xinxi.svg" width: "58" height: "45" />
                                                <p>
                                                      点评
                                                </p>
                                             </a>
                                          </li><li><a href="#" class="jitheme-dt"><img src="images/gonggao.svg" width: "58" height: "45" />
                                                <p>
                                                      打赏
                                                </p>
                                             </a>
                                          </li><li><a href="#" class="jitheme-dt"><img src="images/huiyuan.svg" width: "58" height: "45" />
                                                <p>
                                                      签到
                                                </p>
                                             </a></li>
                                          </div>
                     </div>
对应添加到CSS文件的代码：

.mini-stats-desc.b2-radius li:not(article):hover{opacity: 1;z-index: 99;border-radius: 20px;transform: translateY(-5px);box-shadow: 0 3px 10px rgba(0, 0, 0, .25);animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;}@keyframes index-link-active {0%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0);}16%{transform: perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px);}100%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(65px);}}
.wzw-programme-content .wzw-money-wrap{display:flex;flex-direction:row;flex-wrap:wrap}
.jitheme_slide_d_m {
margin-left: 15px!important;
margin-right: 15px!important;
}
.jitheme_slide_d {
padding-left: 20px;
flex: 0 0 100%;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
.jitheme-dt:hover {
transform: translateY(-3px);
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px);
}

实现的效果图片：
影子江湖分享的打赏赞助文件提取二段代码怎么实现效果，代码高手指点下
New
影子,江湖,分享,打赏,赞助

影子江湖分享的打赏赞助文件提取二段代码怎么实现效果，代码高手指点下
New
影子,江湖,分享,打赏,赞助

求教的问题：
1，代码中有一个li，CSS文件翻译过来是：不是标题，透明度啥的。从代码或CSS里去掉这个li，阴影效果，动态效果就没有了。
2，图片无法设置大小，图片后面添加的高宽度无效。怎么设置？

我知道答案回答被采纳将会获得1 贡献已有2人回答

©dz插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
如有侵权请邮件与我们联系处理:discuz-x@qq.com（手机随时接收邮件）并出示相关证明以便删除。敬请谅解！

浅生 · 发表于 2024-4-2 07:33:17

第二段，同样也是添加在会员边栏：

<div class="wzw-donate-programme mb20 main-bg main-shadow radius8">
                  <div class="wzw-programme-title">
                     <section data-id="124069" class="wzweditor style_1" powered-by="902d.com" draggable="true" data-md5="023bb"><section style="text-align: center;" powered-by="902d.com" data-md5="023bb" class="style_2"><section style="display: inline-block;vertical-align:middle;" powered-by="902d.com" data-md5="023bb" class="style_3"><section style="display: flex;align-items: center;justify-content: space-between;" powered-by="902d.com" data-md5="023bb" class="style_4"><section style="width: 7px;height: 7px;border:1px solid #ffcd59;border-radius: 50%;box-sizing: border-box;transform: translate(52px,5px);" powered-by="902d.com" data-md5="023bb" class="style_5"></section><section style="width:21px;margin: 0 -9px 8px auto;line-height:2px;" powered-by="902d.com" data-md5="023bb" class="style_6"><img src="images/zu3.webp" style="vertical-align:middle;width:100%;" class="small_image style_7" _src="images/zu3.png" data-isstyleimage="1" draggable="false" data-md5="023bb"></section></section><section style="display: flex;align-items: center;justify-content: center;" powered-by="902d.com" data-md5="023bb" class="style_8"><section style="width: 28px;height: 28px;background-color: #85d6ac;border-radius: 4px;margin:0 8px;transform-origin: right bottom;transform: rotate(16deg);" powered-by="902d.com" class="wzw-banone style_9" data-md5="023bb"><section class="wxqq-Color style_10" style="color: #fff;letter-spacing: 1px;line-height: 28px;text-align:center;font-size: 16px;font-weight: bold;" powered-by="902d.com" data-md5="023bb"><p class="wzwbrush style_11" style="padding: 0px;margin: 0px;" data-md5="023bb">赞</p></section></section><section style="width: 28px;height: 28px;background-color: #ff8566;border-radius: 4px;margin:0 8px;transform-origin: left bottom;transform: rotate(-16deg);" powered-by="902d.com" class="wzw-banone style_12" data-md5="023bb"><section class="wxqq-Color style_13" style="color: #fff;letter-spacing: 1px;line-height: 28px;text-align:center;font-size: 16px;font-weight: bold;" powered-by="902d.com" data-md5="023bb"><p class="wzwbrush style_14" style="padding: 0px;margin: 0px;" data-md5="023bb">助</p></section></section><section style="width: 28px;height: 28px;background-color: #ffcd59;border-radius: 4px;transform-origin: right top;transform: rotate(16deg);" powered-by="902d.com" class="wzw-banone style_15" data-md5="023bb"><section class="wxqq-Color style_16" style="color: #fff;letter-spacing: 1px;line-height: 28px;text-align:center;font-size: 16px;font-weight: bold;" powered-by="902d.com" data-md5="023bb"><p class="wzwbrush style_17" style="padding: 0px;margin: 0px;" data-md5="023bb">一</p></section></section><section style="width: 28px;height: 28px;background-color: #7fceff;border-radius: 4px;margin:0 2px;transform-origin: left top;transform: rotate(-16deg);" powered-by="902d.com" class="wzw-banone style_18" data-md5="023bb"><section class="wxqq-Color style_19" style="color: #fff;letter-spacing: 1px;line-height: 28px;text-align:center;font-size: 16px;font-weight: bold;" powered-by="902d.com" data-md5="023bb"><p class="wzwbrush style_20" style="padding: 0px;margin: 0px;" data-md5="023bb">个</p></section></section></section><section style="display: flex;align-items: center;justify-content: space-between;margin-top: -7px;" powered-by="902d.com" data-md5="023bb" class="style_21"><section style="width: 7px;height: 7px;border:1px solid #ffab4c;border-radius: 50%;box-sizing: border-box;transform: translate(7px,-11px);" powered-by="902d.com" data-md5="023bb" class="style_22"></section><section style="width: 7px;height: 7px;border:1px solid #85d6ac;border-radius: 50%;box-sizing: border-box;transform: translate(-27px,5px);" powered-by="902d.com" data-md5="023bb" class="style_23"></section></section></section></section></section>
                  </div>
                  <div class="wzw-programme-content">
                     <ul class="wzw-money-wrap">
                        <li data-pay="10" class="wzwco wzw-money-item main-shadow radius8">
                              <span class="wzw-money-label">￥1</span>
                              <img class="wzw-money-icon" src="images/1.svg" alt="赞助一个鸡腿钱" draggable="false">
                              <b class="wzw-money-name">一个鸡腿</b>
                        </li>

                        <li data-pay="zdy" class="wzwco wzw-money-item main-shadow radius8">
                              <span class="wzw-money-label">自定义</span>
                              <img class="wzw-money-icon" src="images/6.webp" alt="爱心红包" draggable="false">
                              <b class="wzw-money-name dsjb">爱心红包</b>
                        </li>
                     </ul>
                  </div>
            </div>

这个代码真与DZ不一样，一点也看不懂。不过实现的效果倒是可以。
对应的CSS代码：

.wzw-programme-content .wzw-money-wrap{display:flex;flex-direction:row;flex-wrap:wrap}
.wzw-programme-content .wzw-money-item{position:relative;width:50px;height:100px;margin:5px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;border:1px solid transparent;overflow:hidden;-webkit-transition:transform .5s;transition:transform .5s;box-shadow:8px 8px 20px 0 rgb(55 99 170 / 10%), -8px -8px 20px 0 #fff;}
.wzw-programme-content .wzw-money-item:hover{border-color:#ed6d83;-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-transition:transform .5s;transition:transform .5s}
.wzw-donate-programme .wzw-money-label{width:50px;height:20px;line-height:20px;background: #fe85ca;;border-radius:0 5px 0 10px;font-weight:80;color:var(--main-bg-color);font-size:12px;text-align:center;position:absolute;top:-2px;right:-2px}
.wzw-donate-programme .wzw-money-icon{width:40px;height:40px}
.wzw-donate-programme .wzw-money-name{font-size:12px}
.wzw-programme-content .wzw-money-item{width:calc(100% / 2 - 20px)}
}
.wzw-programme-content .wzw-money-item{width:calc(100% / 3 - 20px)}
.wzw-donate-modal-title{margin:1rem;border-bottom:.25rem dashed var(--main-border-color)}
.wzw-donate-modal-title b{font-size:2rem}

效果图片：
影子江湖分享的打赏赞助文件提取二段代码怎么实现效果，代码高手指点下
New
影子,江湖,分享,打赏,赞助

求教问题：
弹窗不出来，影子江湖文件中，有个弹窗代码，如果放上去了，直接在边栏显示。
弹窗代码：

<div class="wp-block-zibllblock-modal wzwi-donate-modal">
                  <div class="modal fade" id="wzw_donate-modal" aria-hidden="true" data-bkg1="false" aria-bkg2="false" role="dialog" tabindex="-1">
                     <div class="modal-dialog modal-mini" data-kd="modal-mini">
                        <div class="modal-content">
                              <div class="modal-header">
                                 <strong class="modal-title">扫码赞助</strong>
                                 <button class="close" data-dismiss="modal"><div data-class="ic-close" data-svg="close" data-viewbox="0 0 1024 1024"></div></button>
                              </div>
                              <div class="wzw-modal-body modal-body">
                                 <div class="wzw-donate-modal-zfm modal-body">
                                    <div class="wzw-donate-modal-title dsjb">
                                          <b>赞助发电❤支持</b>
                                          <p class="wzwi_pay-title">加载中...</p>
                                    </div>
                                       <img class="wzw-money-icon" src="img/vx2.png" alt="赞助" draggable="false">
                                          <img src="" draggable="false">
                                                                                    <div class="wzw-donate-modal-ewm">
                                    </div>
                                    <p>长按保存支付二维码</p>
                                    <div class="wzw-donate-modal-btn">
                                          <div class="wzw-donate-btns">
                                             <button data-type="wx" class="btn wzw-zf-btn wzw-active">微信支付</button>
                                          </div>
                                    </div>
                                 </div>
                              </div>
                        </div>
                     </div>
                  </div>
            </div>
            <script>
                  var pay_money='zdy',pay_type = "wx";
                  function actv_zf_func(pay_ty){
                     $(".wzw-zf-btn").each(function() {
                        $(this).attr("data-type") === pay_ty ? $(this).addClass('wzw-active') : $(this).removeClass('wzw-active');
                     });
                     $(".wzw-donate-modal-ewm>img").attr("src","https://#/pay/"+ pay_ty +"/"+ pay_money +".png");
                  }
                  $(".wzw-programme-content").on("click", ".wzw-money-item", function() {
                     pay_money = $(this).attr("data-pay");
                     pay_type = "wx";
                     var pay_title = $(this).find('.wzw-money-name').text();
                     var pay_text = pay_money === 'zdy' ? '请扫码自定义金额' : "￥ " + pay_money;
                     $(".wzw-donate-modal-title>.wzwi_pay-title").html(pay_title+"（"+pay_text+"）");
                     actv_zf_func(pay_type);
                     $('#wzw_donate-modal').modal('show');
                  });
                  $(".wzwi-donate-modal").on("click", ".wzw-zf-btn", function() {
                     pay_type = $(this).attr("data-type");
                     actv_zf_func(pay_type);
                  });
            </script>

抓这二段，搞了一整天。最终效果还是不理想。
如果影子江湖看到了，请指点一二。代码高手看到了，也请解惑。

拾光 · 发表于 2024-4-2 07:33:33

代码中有一个li，程序默认上是一个小圆点，在DZ上。就像标题前面带一个点一样，图片里带这个点，非常不好看。
在会员下面的代码和CSS代码，把li修改成一个 i，问题解决。
另外，CSS代码中，图片一直设置大小无效，可能这些代码跟DZ的表达方式不一样。
试了一通宵，在CSS代码中加上：
.jitheme_slide_d_m .mini-stats-desc a img {
display:block;
width:58px; 
height:45px;
margin:0 auto 5px
}
.jitheme_slide_d_m .mini-stats-desc {
display:inline-block;
position:relative;
bottom:22px;
height:100%;
-webkit-box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
box-shadow:0 0 1.25rem rgba(108,118,134,0.1);
background-color:var(--body-bg-color) !important;
padding: 10px!important;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
border-radius: var(--main-radius);
}
一楼CSS代码中，下面二段，好似可要可不要的。