<form id="ivb0m"><span id="ivb0m"><track id="ivb0m"></track></span></form>

  • <nav id="ivb0m"></nav>

            jquery+css3选项卡切换特效带动画 爽爽的好用!

            关于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

            最原始的长这样。

            tab切换选项卡

            一看就知道,是国外良心人士之作。为互联网世界的繁荣昌盛(或制作信息垃圾)贡献了自己的那份力量。

            怎么用。

            1.资源复制,复制到你的网页页面所在的同一目录,特别注意是font目录,可别拉下。

            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”>&nbsp;<&nbsp;</i><i id=”next” ripple=”ripple” ripple-color=”#FFF” class=”material-icons”>&nbsp;>&nbsp;</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选项卡切换特效带动画 是不是爽爽的好用呢!

            爽爽的好用

             

            本文链接:肖运华 » 网站策划设计制作优化 » jquery+css3选项卡切换特效带动画 爽爽的好用!
            转载请注明:http://www.gipsh.com/2064.html

            发表评论

            电子邮件地址不会被公开。

            极速赛车10选1稳_Welcome