<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery+CSS3动态数据对比特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background: #f5f7fa;
color: #333;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
width: 100%;
max-width: 900px;
background: white;
border-radius: 10px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
overflow: hidden;
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #2c3e50;
font-size: 28px;
}
.comparison-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
}
.data-column {
flex: 1;
min-width: 250px;
background: #fff;
border-radius: 8px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
padding: 20px;
transition: all 0.3s ease;
}
.data-column:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.column-header {
text-align: center;
padding-bottom: 15px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
font-size: 20px;
font-weight: bold;
color: #2c3e50;
}
.data-item {
margin-bottom: 20px;
}
.data-label {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 14px;
color: #7f8c8d;
}
.data-bar-container {
height: 10px;
background: #ecf0f1;
border-radius: 5px;
overflow: hidden;
}
.data-bar {
height: 100%;
border-radius: 5px;
width: 0;
transition: width 1s ease-out, background 0.3s;
position: relative;
}
.data-value {
position: absolute;
right: 5px;
top: -20px;
font-size: 12px;
font-weight: bold;
opacity: 0;
transition: opacity 0.5s ease;
}
.data-bar.active .data-value {
opacity: 1;
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.control-btn {
padding: 10px 20px;
background: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.control-btn:hover {
background: #2980b9;
transform: translateY(-2px);
}
.control-btn.reset {
background: #e74c3c;
}
.control-btn.reset:hover {
background: #c0392b;
}
.difference-box {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin-top: 30px;
border-left: 4px solid #3498db;
}
.difference-title {
font-size: 18px;
margin-bottom: 15px;
color: #2c3e50;
}
.difference-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px dashed #ddd;
}
.difference-item:last-child {
border-bottom: none;
}
.difference-label {
font-weight: bold;
color: #7f8c8d;
}
.difference-value {
font-weight: bold;
}
.positive {
color: #2ecc71;
}
.negative {
color: #e74c3c;
}
.link-container {
text-align: center;
margin-top: 30px;
}
.more-link {
display: inline-block;
padding: 10px 20px;
background: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 14px;
transition: all 0.3s;
}
.more-link:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(41, 128, 185, 0.3);
}
</style>
</head>
<body>
<div class="container">
<h1>动态数据对比分析</h1>
<div class="controls">
<button class="control-btn" id="compareBtn">开始对比</button>
<button class="control-btn reset" id="resetBtn">重置数据</button>
<button class="control-btn" id="randomBtn">随机数据</button>
</div>
<div class="comparison-container">
<div class="data-column" id="dataA">
<div class="column-header">产品A</div>
<div class="data-item">
<div class="data-label">
<span>性能评分</span>
<span class="data-percent" id="valueA1">0</span>
</div>
<div class="data-bar-container">
<div class="data-bar" id="barA1" data-value="78">
<span class="data-value">78</span>
</div>
</div>
</div>
<div class="data-item">
<div class="data-label">
<span>用户体验</span>
<span class="data-percent" id="valueA2">0</span>
</div>
<div class="data-bar-container">
<div class="data-bar" id="barA2" data-value="85">
<span class="data-value">85</span>
</div>
</div>
</div>
<div class="data-item">
<div class="data-label">
<span>性价比</span>
<span class="data-percent" id="valueA3">0</span>
</div>
<div class="data-bar-container">
<div class="data-bar" id="barA3" data-value="92">
<span class="data-value">92</span>
</div>
</div>
</div>
<div class="data-item">
<div class="data-label">
<span>售后服务</span>
<span class="data-percent" id="valueA4">0</span>
</div>
<div class="data-bar-container">
<div class="data-bar" id="barA4" data-value="80">
<span class="data-value">80</span>
</div>
</div>
</div>
</div>
<div class="data-column" id="dataB">
<div class="column-header">产品B</div>
<div class="data-item">
<div class="data-label">
<span>性能评分</span>
<span class="data-percent" id="valueB1">0</span>
</div>
<div class="data-bar-container">
<div class="data-bar" id="barB1" data-value="92">
<span class="data-value">92</span>
</div>
</div>
</div>
<div class="data-item">
<div class="data-label">
<span>用户体验</span>
<span class="data-percent" id="valueB2">0</span>
</div>
<div class="data-bar-container">
<div class="data-bar" id="barB2" data-value="76">
<span class="data-value">76</span>
</div>
</div>
</div>
<div class="data-item">
<div class="data-label">
<span>性价比</span>
<span class="data-percent" id="valueB3">0</span>
</div>
<div class="data-bar-container">
<div class="data-bar" id="barB3" data-value="88">
<span class="data-value">88</span>
</div>
</div>
</div>
<div class="data-item">
<div class="data-label">
<span>售后服务</span>
<span class="data-percent" id="valueB4">0</span>
</div>
<div class="data-bar-container">
<div class="data-bar" id="barB4" data-value="95">
<span class="data-value">95</span>
</div>
</div>
</div>
</div>
</div>
<div class="difference-box" id="differenceBox" style="display: none;">
<div class="difference-title">对比分析结果</div>
<div class="difference-item">
<span class="difference-label">性能评分差异:</span>
<span class="difference-value" id="diff1">+14</span>
</div>
<div class="difference-item">
<span class="difference-label">用户体验差异:</span>
<span class="difference-value" id="diff2">-9</span>
</div>
<div class="difference-item">
<span class="difference-label">性价比差异:</span>
<span class="difference-value" id="diff3">-4</span>
</div>
<div class="difference-item">
<span class="difference-label">售后服务差异:</span>
<span class="difference-value" id="diff4">+15</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 颜色数组
const colors = ['#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9b59b6', '#1abc9c'];
// 初始化数据条颜色
$('.data-bar').each(function(index) {
$(this).css('background', colors[index % colors.length]);
});
// 对比按钮点击事件
$('#compareBtn').click(function() {
animateBars();
calculateDifferences();
$('#differenceBox').slideDown(800);
});
// 重置按钮点击事件
$('#resetBtn').click(function() {
$('.data-bar').css('width', '0');
$('.data-percent').text('0');
$('.data-bar').removeClass('active');
$('#differenceBox').slideUp(300);
});
// 随机数据按钮点击事件
$('#randomBtn').click(function() {
generateRandomData();
$('#differenceBox').slideUp(300);
});
// 动画效果函数
function animateBars() {
$('.data-bar').each(function() {
const value = $(this).data('value');
$(this).css('width', value + '%');
$(this).addClass('active');
// 更新百分比显示
const percentId = $(this).attr('id').replace('bar', 'value');
let current = 0;
const interval = setInterval(function() {
if (current >= value) {
clearInterval(interval);
} else {
current++;
$('#' + percentId).text(current);
}
}, 1000 / value);
});
}
// 计算差异函数
function calculateDifferences() {
for (let i = 1; i <= 4; i++) {
const valueA = parseInt($('#barA' + i).data('value'));
const valueB = parseInt($('#barB' + i).data('value'));
const difference = valueB - valueA;
$('#diff' + i).text((difference > 0 ? '+' : '') + difference);
if (difference > 0) {
$('#diff' + i).addClass('positive').removeClass('negative');
} else {
$('#diff' + i).addClass('negative').removeClass('positive');
}
}
}
// 生成随机数据函数
function generateRandomData() {
$('.data-bar').each(function() {
const randomValue = Math.floor(Math.random() * 50) + 50;
$(this).data('value', randomValue);
// 更新显示的数值
const barId = $(this).attr('id');
const valueId = barId.replace('bar', 'value');
$('#' + valueId).text(randomValue);
// 重置宽度
$(this).css('width', '0');
$(this).removeClass('active');
});
}
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
