关于tabs选项卡切换特效,在很久以前的一篇工作记录日志里,曾有记,见:tab切换js代码 笨拙却简单实用,然一切都在变化,html进化到了html5,css进化到了css3,jquery还是那个jquery,虽然有很多比它更牛的新事物出现并成为某种解决方案,然在网站的交互特效方面,jquery仍然有持久的生命力。
不多说了,今天帮客户制作营销网页时,弄了一个新的jquery+css3的tabs选项卡切换特效。参见下边url:
http://www.tjxhd.cn/topic/liuxue/meiguo.html
以下算是特色:
- 整体直观明了,风格简洁;
- 有指示“当前”的样式,也有前后箭头来“画蛇添足”;
- 当鼠标移动tab处,有css动画增光添彩;
只说不练,非好汉,下面是实际上如何使用的方式方法。
前端没有秘密,你可以扒前面的这个网址。或者下载最原始的。
https://pan.baidu.com/s/1eTT3DQU
最原始的长这样。
一看就知道,是国外良心人士之作。为互联网世界的繁荣昌盛(或制作信息垃圾)贡献了自己的那份力量。
怎么用。
1.资源复制,复制到你的网页页面所在的同一目录,特别注意是font目录,可别拉下。
2.前后代码,</head>里把css复制过去。把javascript代码放置最后面的</body>前(js代码后置利于网页打开速度,是优化的手段之一)
头部css:
<link rel='stylesheet prefetch' href='css/reset.css'>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
底部javascript:
<script src='js/stopExecutionOnTimeout.js?t=1'></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script>
$(document).ready(function () {
var activePos = $('.tabs-header .active').position();
function changePos() {
activePos = $('.tabs-header .active').position();
$('.border').stop().css({
left: activePos.left,
width: $('.tabs-header .active').width()
});
}
changePos();
var tabHeight = $('.tab.active').height();
function animateTabHeight() {
tabHeight = $('.tab.active').height();
$('.tabs-content').stop().css({ height: tabHeight + 'px' });
}
animateTabHeight();
function changeTab() {
var getTabId = $('.tabs-header .active a').attr('tab-id');
$('.tab').stop().fadeOut(300, function () {
$(this).removeClass('active');
}).hide();
$('.tab[tab-id=' + getTabId + ']').stop().fadeIn(300, function () {
$(this).addClass('active');
animateTabHeight();
});
}
$('.tabs-header a').on('click', function (e) {
e.preventDefault();
var tabId = $(this).attr('tab-id');
$('.tabs-header a').stop().parent().removeClass('active');
$(this).stop().parent().addClass('active');
changePos();
tabCurrentItem = tabItems.filter('.active');
$('.tab').stop().fadeOut(300, function () {
$(this).removeClass('active');
}).hide();
$('.tab[tab-id="' + tabId + '"]').stop().fadeIn(300, function () {
$(this).addClass('active');
animateTabHeight();
});
});
var tabItems = $('.tabs-header ul li');
var tabCurrentItem = tabItems.filter('.active');
$('#next').on('click', function (e) {
e.preventDefault();
var nextItem = tabCurrentItem.next();
tabCurrentItem.removeClass('active');
if (nextItem.length) {
tabCurrentItem = nextItem.addClass('active');
} else {
tabCurrentItem = tabItems.first().addClass('active');
}
changePos();
changeTab();
});
$('#prev').on('click', function (e) {
e.preventDefault();
var prevItem = tabCurrentItem.prev();
tabCurrentItem.removeClass('active');
if (prevItem.length) {
tabCurrentItem = prevItem.addClass('active');
} else {
tabCurrentItem = tabItems.last().addClass('active');
}
changePos();
changeTab();
});
$('[ripple]').on('click', function (e) {
var rippleDiv = $('<div class="ripple" />'), rippleOffset = $(this).offset(), rippleY = e.pageY - rippleOffset.top, rippleX = e.pageX - rippleOffset.left, ripple = $('.ripple');
rippleDiv.css({
top: rippleY - ripple.height() / 2,
left: rippleX - ripple.width() / 2,
background: $(this).attr('ripple-color')
}).appendTo($(this));
window.setTimeout(function () {
rippleDiv.remove();
}, 1500);
});
});
</script>
(注:这代码很牛的,华哥就算是学上几天,都未必能完全搞懂。)
3.复制<article>......</article>至页面html结构中的某个位置。
<article class="htmleaf-container">
<div class="tabs">
<div class="tabs-header">
<div class="border"></div>
<ul>
<li class="active"><a href="#tab-1" tab-id="1" ripple="ripple" ripple-color="#FFF">美高申请流程</a></li>
<li><a href="#tab-2" tab-id="2" ripple="ripple" ripple-color="#FFF">美高申请条件</a></li>
<li><a href="#tab-3" tab-id="3" ripple="ripple" ripple-color="#FFF">美高申请时间</a></li>
<li><a href="#tab-4" tab-id="4" ripple="ripple" ripple-color="#FFF">美本申请条件</a></li>
<li><a href="#tab-5" tab-id="5" ripple="ripple" ripple-color="#FFF">美本申请时间</a></li>
<li><a href="#tab-6" tab-id="6" ripple="ripple" ripple-color="#FFF">美硕申请条件</a></li>
</ul>
<nav class="tabs-nav"><i id="prev" ripple="ripple" ripple-color="#FFF" class="material-icons"> < </i><i id="next" ripple="ripple" ripple-color="#FFF" class="material-icons"> > </i></nav>
</div>
<div class="tabs-content">
<div tab-id="1" class="tab active">
<ol>
<li>1.推荐符合条件的申请学校</li>
<li>2.填写申请表格,递交申请材料及申请费</li>
<li>3.安排面试(不包含无面试学校)</li>
<li> 4.获取面试结果(不包含无面试学校)</li>
<li>5.获得学校录取,填写录取协议</li>
<li>6.交纳押金,获得电子版I-20表格</li>
<li>7.填写后续表格</li>
<li>8.获取正式录取包(正式I-20)</li>
<li>9.获取签证/缴纳学费</li>
<li>10.安排住宿</li>
<li> 11.出境准备/学校安排接机 </li>
</ol>
</div>
<div tab-id="2" class="tab">
<p>国内就读7-11年级,年龄在11-17岁之间的在读生<br>
较强的英文能力,最好参加相应的语言考试<br>
要有较强的学习能力,成绩中上等水平<br>
家庭年收入在15w人民币以上<br>
</p>
</div>
<div tab-id="3" class="tab">
<p>3月:制定留学计划,加强英语学习,家庭资金规划<br>
6月:锁定4-10所目标学校,注册TOEFL考试<br>
7月:参加考试培训或自行集训,索取学校申请资料<br>
9月:注册SSAT,参加TOEFL考试,取得TOEFL分数后确认要申请的学校<br>
10月:准备填写申请资料<br>
11月:参加SSAT考试<br>
12月:要求就读学校向申请学校提供成绩单,缴纳申请费,电话面试<br>
次年1-2月:提交申请,申请跟踪<br>
次年3月:拿到学校offer,申请护照<br>
次年4月:签订入学合同,缴纳押金,拿到I-20,预定机票<br>
</p>
</div>
<div tab-id="4" class="tab">
<p>至少高中毕业,平均分80左右<br>
需要提供很好的硬件成绩(如高中成绩GPA,托福成绩,SAT成绩)<br>
需要学生有很好的软件条件(如参加过若干比赛,获得过奖项荣誉或者还有其他的特殊经历)<br>
学费15-20w人民币,生活费7-10w人民币<br>
</p>
</div>
<div tab-id="5" class="tab">
<p>3月:制定留学计划,加强英语学习,家庭资金规划<br>
5月:锁定8-12所目标学校,注册TOEFL考试,注册SAT考试<br>
6月:参加考试培训,索取学校申请资料,参加第一次SAT考试(建议)<br>
9月:参加TOEFL考试,取得分数后去定要申请的学校,开通学校网申系统,搜集各学校文书题目,开始构思和写作。<br>
10月:准备申请资料,如申请常规录取,可再次参加SAT考试,如分数等条件具备,计划申请EA/ED轮次,本月内需完成文书写作并提交网申表格。<br>
11月:如申请常规录取,可再次参加SAT考试,11月初或中旬EA/ED轮次申请截止<br>
12月:如申请常规录取,可再次参加SAT考试,要求就读学校向申请学校提供成绩单,如申请常规录取,本月内须提交网申系统并缴纳申请费,12月中旬EA/ED轮次申请结果发布<br>
次年1-2月:1月初或中旬本科常规申请截止,开始跟踪申请状态,保持每天登陆网申系统或申请用邮箱,查看学校通知<br>
次年3-4月:收到offer,拿到I-20表格<br>
5月:预约签证,签证准备<br>
6月:签证,购买机票<br>
7月:收拾行李,强化英语<br>
8月:根据学校开放时间抵达 </p>
</div>
<div tab-id="6" class="tab">
<p>国家承认的本科在读生<br>
TOEFL/IELTS, GRE/GMAT<br>
国内本科教育大四在读生或毕业生<br>
每年学费20-35w人民币,生活费10-12w人民币 </p>
</div>
</div>
</article>
(注:这里边要注意的,就是tab-id这个对应的数字,按顺序来,要增加就增加,要减少就减少,睁大眼睛,保持tabs选项条目与内容条目一一对应即可,就不会出乱子)
4.适当修改默认的css文件,让tabs选项切换卡与当前页面风格,宽度,文字大小等匹配。
最后,一古脑儿的通过ftp上传吧,在终极互联网环境看效果。
jquery+css3选项卡切换特效带动画 是不是爽爽的好用呢!