111 lines
4.0 KiB
JavaScript
111 lines
4.0 KiB
JavaScript
// ===== 东部战区海军首页交互 (兼容 jQuery 1.4.2) =====
|
|
|
|
$(function () {
|
|
|
|
// 1. 头条轮播图
|
|
(function () {
|
|
var $car = $('#carousel-headline');
|
|
var $list = $car.find('.carousel-list > li');
|
|
var $dot = $('<ol class="carousel-dot" />');
|
|
$list.each(function (i) {
|
|
$dot.append($('<li />').click(function () { go(i); }));
|
|
});
|
|
$car.find('.carousel-dot').remove();
|
|
$car.append($dot);
|
|
var idx = 0, timer;
|
|
function go(n) {
|
|
idx = (n + $list.length) % $list.length;
|
|
$list.removeClass('on').eq(idx).addClass('on');
|
|
$dot.children().removeClass('on').eq(idx).addClass('on');
|
|
}
|
|
function play() { timer = setInterval(function () { go(idx + 1); }, 5000); }
|
|
function stop() { clearInterval(timer); }
|
|
$car.find('.carousel-prev').click(function () { go(idx - 1); stop(); play(); });
|
|
$car.find('.carousel-next').click(function () { go(idx + 1); stop(); play(); });
|
|
$car.hover(stop, play);
|
|
go(0); play();
|
|
})();
|
|
|
|
// 2. Tab 切换（学习强军/东海文化）
|
|
$('.study-tabs .tab, .culture-hd .sub-tabs a, .sub-tabs a').click(function (e) {
|
|
e.preventDefault();
|
|
$(this).addClass('cur').siblings().removeClass('cur');
|
|
});
|
|
|
|
// 3. 返回顶部
|
|
var $back = $('#backTop');
|
|
$(window).scroll(function () {
|
|
if ($(this).scrollTop() > 500) $back.addClass('show');
|
|
else $back.removeClass('show');
|
|
});
|
|
$back.click(function (e) {
|
|
e.preventDefault();
|
|
$('html, body').animate({ scrollTop: 0 }, 300);
|
|
});
|
|
|
|
// 4. ECharts 柱状图（学习数据）
|
|
if (typeof echarts !== 'undefined' && document.getElementById('echart-bar')) {
|
|
var barChart = echarts.init(document.getElementById('echart-bar'));
|
|
barChart.setOption({
|
|
grid: { top: 20, right: 10, bottom: 30, left: 30 },
|
|
tooltip: { trigger: 'axis' },
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
|
axisLine: { lineStyle: { color: '#ccc' } },
|
|
axisLabel: { fontSize: 10, color: '#666' }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: { show: false },
|
|
axisTick: { show: false },
|
|
splitLine: { lineStyle: { color: '#eee' } },
|
|
axisLabel: { fontSize: 10, color: '#999' }
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data: [180, 210, 240, 220, 260, 280, 300, 320, 0, 0, 0, 0],
|
|
barWidth: '50%',
|
|
itemStyle: { color: '#0066CC', borderRadius: [3, 3, 0, 0] }
|
|
}]
|
|
});
|
|
}
|
|
|
|
// 5. ECharts 饼图（学习类型分布）
|
|
if (typeof echarts !== 'undefined' && document.getElementById('echart-pie')) {
|
|
var pieChart = echarts.init(document.getElementById('echart-pie'));
|
|
pieChart.setOption({
|
|
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
|
|
legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11 } },
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['35%', '60%'],
|
|
center: ['50%', '45%'],
|
|
avoidLabelOverlap: false,
|
|
label: { show: false },
|
|
data: [
|
|
{ value: 35, name: '理论学习', itemStyle: { color: '#CC0000' } },
|
|
{ value: 25, name: '业务学习', itemStyle: { color: '#003366' } },
|
|
{ value: 20, name: '专题教育', itemStyle: { color: '#DEB100' } },
|
|
{ value: 20, name: '其他', itemStyle: { color: '#1f7a3a' } }
|
|
]
|
|
}]
|
|
});
|
|
}
|
|
|
|
// 6. 日历上下月（仅 UI 演示）
|
|
$('.cal-prev, .cal-next').click(function (e) {
|
|
e.preventDefault();
|
|
alert('切换月份（演示）');
|
|
});
|
|
|
|
// 7. 轮播图 resize
|
|
$(window).resize(function () {
|
|
if (typeof echarts !== 'undefined') {
|
|
if (document.getElementById('echart-bar')) echarts.getInstanceByDom(document.getElementById('echart-bar')) && echarts.getInstanceByDom(document.getElementById('echart-bar')).resize();
|
|
if (document.getElementById('echart-pie')) echarts.getInstanceByDom(document.getElementById('echart-pie')) && echarts.getInstanceByDom(document.getElementById('echart-pie')).resize();
|
|
}
|
|
});
|
|
|
|
});
|