<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery仿QQ面板文字图标滑动切换 - 【更多源码：www.96flw.com】</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="tab--card">
<ul class="tab--card--header">
<li class="tab--card--header--item active">
<div class="iconbox">
<i class="iconfont icon-item"><span class="count">23</span></i>
</div>
<span class="text">我的消息(23)</span>
</li>
<li class="tab--card--header--item">
<div class="iconbox">
<i class="iconfont icon-item"> <span class="count">99</span></i>
</div>
<span class="text">我的好友(99)</span>
</li>
<li class="tab--card--header--item">
<div class="iconbox">
<i class="iconfont icon-item"><span class="count">11</span></i>
</div>
<span class="text">群/讨论组(11)</span>
</li>
<li class="tab--card--header--item">
<div class="iconbox">
<i class="iconfont icon-item"><span class="count">8</span></i>
</div>
<span class="text">我的动态(8)</span>
</li>
<span class="sanjiao"></span>
</ul>
<ul class="tab--card--content">
<li class="tab--card--content--item active"></li>
<li class="tab--card--content--item"></li>
<li class="tab--card--content--item"></li>
<li class="tab--card--content--item"></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
/*
* 每个头部item被点击
* */
$('.tab--card--header--item').on('click', function (event) {
/*
* 如果当前item有active，不需要动，直接return
* */
if($(this).hasClass('active')) {
return true;
}
var index = $(this).index(); // 当前被点击的index下标
var activeIndex = $(this).siblings('.active').index(); // 当前拥有active的index下标
var direction = index > activeIndex ? 'right' : 'left'; // 项目应当从右还是从左划进来？
var contentItem = $('.tab--card--content--item').eq(index); // 需要划进来的content item
// 遍历内容item 就是上面的content item
$('.tab--card--content--item').each(function (i) {
var zIndex = $(this).index() + 1; // zindex求为每个内容item下标+1
if($(this).hasClass('active')) { // 如果当前元素有active，那么就应该高一点zindex
zIndex = 11;
}
$(this).css({zIndex: zIndex, transition: 'none'}); // 设置zindex，清空transition
});
contentItem.css({ // 先把要划进来的content item的动画前的坐标定位好，它的zindex要高于其他所有（包含当前拥有active）的item
left: (direction === 'right' ? '100%' : '-100%'),
zIndex: 22
});
setTimeout(function () { // 下一次轮询设置动画和left的值
contentItem.css({
transition: 'left 0.3s ease',
left: 0
});
}, 0);
// 设置active
$(this).addClass('active').css('width','40%').siblings().removeClass('active').css('width','20%');
$('.sanjiao').css({
left: 20+20*index + '%',
width: 0+'%'}); // 三角动画
$('.tab--card--content--item').eq(index).addClass('active').siblings().removeClass('active');
});
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery仿QQ面板文字图标滑动切换.zip
80 浏览量
2023-11-02
23:00:42
上传
评论
收藏 96KB ZIP 举报
jQuery仿QQ面板文字图标滑动切换.zip （7个子文件） 
jiaoben6886 js 
jquery.min.js 94KB img 
shop-cart4.jpg 22KB shop-cart3.jpg 24KB shop-cart1.jpg 15KB shop-cart2.jpg 14KB css style.css 5KB
index.html 4KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5851
