前端HTML代码展示
<!DOCTYPE html>
<html lang="zh-cn"> <!-- 定义文档类型和语言，zh-cn表示简体中文 -->
<head>
<meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口属性，用于移动设备 -->
<title>打赏</title> <!-- 页面标题 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery库 -->
<link rel="stylesheet" href="index.css" type="text/css"> <!-- 引入CSS样式文件 -->
<script src="index.js"></script> <!-- 引入JavaScript文件 -->
</head>
<body>
<!-- 打赏按钮 -->
<p>
<a href="javascript:void(0)" onclick="dashangToggle()" class="dashang" title="打赏，支持一下">打赏</a>
</p>
<!-- 隐藏框，用于遮罩效果 -->
<div class="hide_box"></div>
<!-- 打赏盒子，包含打赏信息和支付方式 -->
<div class="shang_box">
<!-- 关闭按钮 -->
<a class="shang_close" href="javascript:void(0)" onclick="dashangToggle()" title="关闭">
<img class="gb" src="./images/关闭.png" alt="取消" />
</a>
<!-- 打赏标题 -->
<div class="shang_tit">
<p>感谢您的支持，我会继续努力的!</p>
</div>
<!-- 支付方式图片 -->
<div class="shang_payimg">
<img class="ds" src="./images/weixin.jpg" alt="扫码支持" title="扫一扫" />
</div>
<!-- 支付方式说明 -->
<div class="pay_explain">扫码打赏，你说多少就多少</div>
<!-- 支付方式选择 -->
<div class="shang_payselect">
<!-- 支付宝支付方式 -->
<div class="pay_item checked" data-id="alipay">
<span class="radiobox"></span>
<span class="pay_logo">
<img class="wx" src="./images/zfb.png" alt="支付宝" />
</span>
</div>
<!-- 微信支付方式 -->
<div class="pay_item" data-id="weipay">
<span class="radiobox"></span>
<span class="pay_logo">
<img class="wx" src="./images/wx.png" alt="微信" />
</span>
</div>
</div>
<!-- 打赏信息 -->
<div class="shang_info">
<p>打开<span id="shang_pay_txt">支付宝</span>扫一扫，即可进行扫码打赏哦</p>
<p>
Powered by <a href="http://blog.xiaoji.xj.cn" target="_blank"
title="昨日博客">blog.xiaoji.xj.cn</a>，学的不仅是技术，更是梦想！！！
</p>
</div>
</div>
</body>
</html>CSS代码展示
/* 基础样式 */
.content {
width: 80%;
/* 设置内容区域的宽度为视口宽度的80% */
margin: 10px auto;
/* 设置上下外边距为10px，左右自动居中 */
}
/* 隐藏框样式 */
.hide_box {
z-index: 999;
/* 设置遮罩层的堆叠顺序，确保它在其他元素之上 */
filter: alpha(opacity=50);
/* 旧版IE的透明度设置 */
background: #666;
/* 设置遮罩层的背景颜色 */
opacity: 0.5;
/* 设置遮罩层的透明度为50% */
-moz-opacity: 0.5;
/* 旧版Firefox的透明度设置 */
position: fixed;
/* 设置遮罩层为固定定位 */
top: 0;
/* 设置遮罩层的上边距为0 */
left: 0;
/* 设置遮罩层的左边距为0 */
right: 0;
/* 设置遮罩层的右边距为0 */
bottom: 0;
/* 设置遮罩层的下边距为0 */
display: none;
/* 默认不显示遮罩层 */
}
/* 上方盒子样式 */
.shang_box {
width: 90%;
/* 设置上方盒子的宽度为视口宽度的30% */
max-width: 540px;
/* 设置上方盒子的最大宽度为540px */
height: auto;
/* 设置上方盒子的高度为自动 */
padding: 10px;
/* 移除内边距 */
background-color: #fff;
/* 设置背景颜色为白色 */
border-radius: 10px;
/* 设置边框圆角为10px */
position: fixed;
/* 设置固定定位 */
z-index: 1000;
/* 设置堆叠顺序，确保它在其他元素之上 */
left: 50%;
/* 设置左边距为视口宽度的50% */
top: 50%;
/* 设置上边距为视口高度的50% */
transform: translate(-50%, -50%);
/* 使用CSS3的transform属性居中盒子 */
border: 1px dotted #dedede;
/* 设置边框为点状线 */
display: none;
/* 默认不显示盒子 */
}
/* 图片样式 */
.shang_payimg img {
width: 100%;
/* 设置图片宽度为100% */
height: auto;
/* 设置图片高度为自动 */
}
/* 打赏按钮样式 */
.dashang {
display: block;
/* 设置为块级元素 */
width: 100px;
/* 设置宽度为100px */
margin: 5px auto;
/* 设置外边距为5px，左右自动居中 */
height: 25px;
/* 设置高度为25px */
line-height: 25px;
/* 设置行高为25px */
padding: 10px;
/* 设置内边距为10px */
background-color: #E74851;
/* 设置背景颜色为红色 */
color: #fff;
/* 设置文字颜色为白色 */
text-align: center;
/* 文本居中对齐 */
text-decoration: none;
/* 移除下划线 */
border-radius: 10px;
/* 设置边框圆角为10px */
font-weight: bold;
/* 设置字体为粗体 */
font-size: 16px;
/* 设置字体大小为16px */
transition: all 0.3s;
/* 设置过渡效果，所有属性在0.3秒内变化 */
}
.dashang:hover {
opacity: 0.8;
/* 鼠标悬停时透明度为80% */
padding: 15px;
/* 鼠标悬停时内边距增加 */
font-size: 18px;
/* 鼠标悬停时字体大小增加 */
}
/* 关闭按钮样式 */
.shang_close {
float: right;
/* 将关闭按钮浮动到右侧 */
display: inline-block;
/* 使关闭按钮作为内联块元素显示 */
}
/* 打赏标题样式 */
.shang_logo {
display: block;
/* 将标题作为块级元素显示 */
text-align: center;
/* 文本居中对齐 */
margin: 20px auto;
/* 上下外边距为20px，左右自动居中 */
}
/* 打赏标题的子元素样式 */
.shang_tit {
width: 100%;
/* 设置宽度为100% */
height: 75px;
/* 设置高度为75px */
text-align: center;
/* 文本居中对齐 */
line-height: 66px;
/* 设置行高为66px */
color: #a3a3a3;
/* 设置文字颜色为灰色 */
font-size: 16px;
/* 设置字体大小为16px */
background: url('./image/wx.png');
/* 设置背景图片 */
font-family: 'Microsoft YaHei';
/* 设置字体为微软雅黑 */
margin-top: 7px;
/* 上外边距为7px */
margin-right: 2px;
/* 右外边距为2px */
}
/* 打赏标题的段落样式 */
.shang_tit p {
color: #a3a3a3;
/* 设置文字颜色为灰色 */
text-align: center;
/* 文本居中对齐 */
font-size: 16px;
/* 设置字体大小为16px */
}
/* 支付方式图片样式 */
.shang_payimg {
width: 140px;
/* 设置宽度为140px */
padding: 0;
/* 移除内边距 */
border: 6px solid #EA5F00;
/* 设置边框为6px宽的橙色实线 */
margin: 0 auto;
/* 上下外边距为0，左右自动居中 */
border-radius: 3px;
/* 设置边框圆角为3px */
height: 140px;
/* 设置高度为140px */
}
/* 支付方式图片的图片样式 */
.shang_payimg img {
display: block;
/* 将图片作为块级元素显示 */
text-align: center;
/* 文本居中对齐 */
width: 140px;
/* 设置宽度为140px */
height: 140px;
/* 设置高度为140px */
}
/* 支付方式说明样式 */
.pay_explain {
text-align: center;
/* 文本居中对齐 */
margin: 10px auto;
/* 上下外边距为10px，左右自动居中 */
font-size: 12px;
/* 设置字体大小为12px */
color: #545454;
/* 设置文字颜色为深灰色 */
}
/* 支付方式选择的单个选项样式 */
.radiobox {
width: 16px;
/* 设置宽度为16px */
height: 16px;
/* 设置高度为16px */
background: url('./images/alipayimg.png');
/* 设置背景图片 */
display: block;
/* 将背景图片作为块级元素显示 */
float: left;
/* 浮动到左侧 */
margin-top: 5px;
/* 上外边距为5px */
margin-right: 14px;
/* 右外边距为14px */
}
/* 当支付方式被选中时的样式 */
.checked .radiobox {
background: url('./images/weipayimg.png');
/* 设置背景图片为微信的图片 */
}
/* 支付方式选择的容器样式 */
.shang_payselect {
text-align: center;
/* 文本居中对齐 */
margin: 0 auto;
/* 上下外边距为0，左右自动居中 */
margin-top: 40px;
/* 上外边距为40px */
cursor: pointer;
/* 鼠标悬停时显示指针 */
height: 60px;
/* 设置高度为60px */
width: 280px;
/* 设置宽度为280px */
}
/* 支付方式选择的每个选项样式 */
.shang_payselect .pay_item {
display: inline-block;
/* 将每个选项作为内联块元素显示 */
margin-right: 10px;
/* 右外边距为10px */
flex: 1;
/* 使用弹性盒子模型分配空间 */
}
/* 打赏信息样式 */
.shang_info {
clear: both;
/* 清除浮动 */
}
/* 打赏信息的段落和链接样式 */
.shang_info p,
.shang_info a {
color: #C3C3C3;
/* 设置文字颜色为浅灰色 */
text-align: center;
/* 文本居中对齐 */
font-size: 12px;
/* 设置字体大小为12px */
text-decoration: none;
/* 移除下划线 */
line-height: 2em;
/* 设置行高为2em */
}
/* 关闭按钮的图标样式 */
.gb {
height: 30px;
/* 设置高度为30px */
width: 30px;
/* 设置宽度为30px */
}
/* 打赏图片的样式 */
.ds {
width: 100%;
/* 设置宽度为100% */
height: 100%;
/* 设置高度为100% */
}
/* 微信图标样式 */
.wx {
width: 30px;
/* 设置宽度为30px */
height: 30px;
/* 设置高度为30px */
}JavaScript代码展示
// 当文档加载完成后执行的函数
$(function () {
// 绑定点击事件到所有具有 'pay_item' 类的元素
$(".pay_item").click(function () {
// 当前点击的元素添加 'checked' 类
$(this).addClass('checked');
// 当前点击元素的所有兄弟元素（具有 'pay_item' 类）移除 'checked' 类
$(this).siblings('.pay_item').removeClass('checked');
// 获取当前点击元素的 'data-id' 属性值
var dataid = $(this).attr('data-id');
// 选择所有具有 'shang_payimg img' 类的图片元素，并设置其 'src' 属性
// 通过 'data-id' 的值来确定图片的文件名
$(".shang_payimg img").attr("src", "images/" + dataid + "img.png");
// 选择ID为 'shang_pay_txt' 的元素，并设置其文本内容
// 根据 'data-id' 的值来确定显示的文本是 '支付宝' 还是 '微信'
$("#shang_pay_txt").text(dataid == "alipay" ? "支付宝" : "微信");
});
});
// 定义一个名为 'dashangToggle' 的函数
function dashangToggle() {
// 使用jQuery的 'fadeToggle' 方法来切换 '.hide_box' 元素的可见性
// 这个方法会淡入或淡出元素，取决于元素当前的可见状态
$(".hide_box").fadeToggle();
// 使用 'fadeToggle' 方法来切换 '.shang_box' 元素的可见性
$(".shang_box").fadeToggle();
}THE END
