利用jQuery实现仿QQ面板文字图标滑动切换



45 177 60



特效描述:利用jQuery实现 仿QQ面板 文字图标 滑动切换,利用jQuery实现仿QQ面板文字图标滑动切换

代码结构

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代码

<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">
$(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';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 导航切换 滑动选项卡切换 图片滑动 图片切换 文字滑动 文字切换 滑动手风琴 背景切换 滑动星星打分 手风琴 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滑动滑过 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到