极客编程挑战015： jQuery或CSS3生成一个页面右下角的广告弹出效果
页面加载后，右小角滑出一个广告栏，代码如下， 点击“关闭”，广告栏滑出页面（滑动效果和方向随意，尽量酷一些，^_^）
基础HTML如下：
-
<div id=\”ads\”>
-
<span>关闭</span>
-
<p>广告内容：gbtags.com</p>
-
</div>
基础CSS如下：
-
/*CSS源代码*/
-
body{
-
background:#CFCFCF;
-
font-family: \’microsoft yahei\’,Arial,sans-serif;
-
}
-
#ads{
-
font-size:14px;
-
position: absolute;
-
right:0;
-
bottom: 0;
-
background: #222;
-
padding: 10px;
-
color: #FFF;
-
border-radius: 3px;
-
}
-
#ads p{
-
opacity: .6;
-
margin: 25px 10px 10px;
-
padding: 10px;
-
background: #444;
-
border-radius: 3px;
-
}
-
.close{
-
float:right;
-
font-size:12px;
-
cursor:pointer;
-
}
-
录制代码编写过程或最终代码：点击开始
-
跟帖发布代码预览地址（可以使用GB按钮直接嵌入留言）： 演示地址
-
【强烈提醒】加入QQ群：157757552， 获奖用户及递交快递联系方式
本期挑战礼品5份（抱枕 + T恤 + 毛巾）由 coding 鼎力赞助！
Coding.net 是一个面向开发者的云端软件协作开发平台，目前有 Git 代码仓库、在线 IDE、演示部署、团队协作等功能。Coding 为中小型团队提供快速的软件开发环境，极大地提高软件开发的效率。致力于改变现有的开发模式，推动软件开发云端化。
-
抱枕
超柔短毛绒表面/优质三维pp棉
号称东半球最大IT抱枕商的经典吉祥物
程序员通宵加班必备暖心之物
-
Coding T恤
100%无污染生态棉花/牢固耐磨/不易脱线
绿色环保的免烫抗皱工艺
不同于一般公司文化衫的设计
简单个性，一切以舒适为主
-
Coding 毛巾
16S螺旋/21S 巴基斯坦棉/大毛圈加厚设计/三针五线精密锁边
超越五星级大酒店标准的顶级工艺定制
如婴儿肌肤般的细腻触感
简洁白，给你素雅自然的安全感
超乎你想象的柔软和舒适
-
最快完成奖一名： 最快保存递交“合格”代码
-
最佳讲解奖一名： 代码录制过程及讲解详细完整
-
最佳人气奖一名： 点赞（点+）的人最多
-
本期新人奖两名： 新人参加本挑战均有机会
点击这里晒晒礼物
参加挑战或了解详情，请点击“阅读原文”
继承Jquery的方法–tab滑动动画切换
前言
最近产品有个需求，要做个tab标签切换，这最基本的样式当然不在话下，但作为极客的我总要与众不同吧！于是大开脑洞，也就想出了个tab切换时候加个滑动动画（表笑我，谁让咱没达到UI交互设计师的高度呢），再然后正好想起本站曾经有个效果（传送门），于是乎找了这个效果demo给产品看，产品欣然同意了。
那么，问题又来了，之前的这个效果有几个弊端，也是我和产品认为不好的：
-
不同tab页的内容高度不同，差距可能还比较大，不能用一个统一的固定高度来搞
-
例如从tab1跳到tab3这种跨项的情况，原则上是不能让用户在动画过程中看到tab2内容的（不要问为什么，这就是极客精神），如果从tab1跳到tab5，中间跨了3项，这体验总感觉略low啊
因此，轮子还得造！
需求功能
-
不固定高度。高度不同的tab页直接也可以自适应切换
-
跨项无缝切换。跨项切换时候不会看到中间项内容
-
tab标题也增加滑动动画
思路分析
-
所谓不固定高度，那么只有在即将动画时拿到切换前和切换后两个tab页中较大的高度进行设置
-
跨项不显示中间项的话，那么只有“造假”了：把切换前和切换后的两个tab页克隆下来构造个动画区，放到最前面，走个过场动画，同时隐藏掉原来真实tab页，结束后remove掉动画区，同时将真实tab页展现（本人觉得这是个简单的笨办法，如果大神有更合适的思路可以留言讨论）
代码赏析
以下是jquery插件的原代码，注释可以说的手把手的教学！每一步都写了注释，重点就是看“tab页动画部分”的注释
$.fn.extend({tab: function (index) {//index:初始化后第几个tab显示，默认0 this.each(function () { var animating = false;//动画进行中的标识，保证不会在动画过程中再次执行动画 var $this = $(this); var $tabCard = $this.children(\”.tab-card\”); var $tabCards = $tabCard.children(); var $tabPaper = $this.children(\”.tab-paper\”); var $tabPapers = $tabPaper.children(); var curIndex = $tabCards.filter(\”.cur\”).index();//通过cur获取当前tab页序号 curIndex = index || (curIndex == -1 ? 0 : curIndex) || 0;//参数index优先级最高 //初始化cur状态 $tabCards.removeClass(\”cur\”); $tabPapers.removeClass(\”cur\”); $tabCards.eq(curIndex).addClass(\”cur\”); $tabPapers.eq(curIndex).addClass(\”cur\”); /*************************tab标签的动画部分*************************/ /*此段代码借鉴lavaLamp，构造一个绝对定位的back li在滑动*/ $tabCard.each(function () { var b = $(this), noop = function () { }, $back = $(\'<li class=\”back\”><div class=\”left\”></div></li>\’).appendTo(b), $li = $(\”li\”, this), curr = $(\”li.cur\”, this)[0] || $($li[0]).addClass(\”cur\”)[0]; $li.not(\”.back\”).hover(function () { move(this) }, noop); $(this).hover(noop, function () { move(curr) }); $li.not(\”.back\”).click(function (e) { if (!animating) { setCurr(this); } }); setCurr(curr); function setCurr(a) { $back.css({\”left\”: a.offsetLeft + \”px\”, \”width\”: a.offsetWidth + \”px\”}); curr = a } function move(a) { $back.each(function () { $(this).dequeue() }).animate({width: a.offsetWidth, left: a.offsetLeft}, 500, \”easeOutBack\”); } }); /*************************tab页动画部分*************************/ /*tab标签点击*/ $tabCards.on(\”click\”, function () { slide(this) }); /*直接更改当前tab标签样式*/ function changeCard(the) { var $t = $(the); $t.addClass(\”cur\”).siblings().removeClass(\”cur\”); } /*直接切换tab页内容位置*/ function changePaper(the) { var $t = $(the); var ci = $t.index(); $tabPapers.eq(ci).addClass(\”cur\”).siblings().removeClass(\”cur\”); curIndex = ci; $tabPaper.height($tabPapers.eq(ci).height()); } /*tab页滑动动画*/ function slide(the) { if (!animating) { var $t = $(the); changeCard(the); var ci = $t.index(); // 当前页和切换页相同时 直接返回 if (ci == curIndex) return; var $fromPaper = $tabPapers.eq(curIndex); var $toPaper = $tabPapers.eq(ci); //克隆一个当前页和一个切换页，后续只做动画使用 var $fromPaper_clone = $fromPaper.clone(); var $toPaper_clone = $toPaper.clone(); //获取tab页宽度，padding样式 var paperWidth = $tabPaper.width(); var paperPadding = $tabPaper.css(\”padding\”); var paperPaddingLeft = parseInt($tabPaper.css(\”padding-left\”)); //通过宽度和padding计算总宽度 var paperWidthTotal = paperWidth + 2 * paperPaddingLeft; //比较当前页和切换页的高度，选取高的作为动画时的高度 var paperHeight = Math.max($fromPaper.height(), $toPaper.height()); //定义动画区样式 $fromPaper_clone.css({ float: \”left\”, display: \”block\”, background: \”#fff\”, padding: paperPadding, width: paperWidth, height: $fromPaper.height() }); $toPaper_clone.css({ float: \”left\”, \”display\”: \”block\”, background: \”#fff\”, padding: paperPadding, \”width\”: paperWidth, height: $toPaper.height() }); //定义动画区，此动画区只作动画使用，动画完成后立刻remove var $animateArea = $(\”<div></div>\”); $animateArea.css({ \”position\”: \”absolute\”, \”top\”: 0, left: 0, width: 2 * paperWidthTotal, height: paperHeight }); //定义动画到达的位置，比较切换页和当前页序号大小，以此决定动画是向前滑动还是向后滑动 var animateLeft; if (ci > curIndex) { $animateArea.css(\”left\”, 0).append($fromPaper_clone).append($toPaper_clone); animateLeft = -paperWidthTotal; } else if (ci < curIndex) { $animateArea.css(\”left\”, -paperWidthTotal).append($toPaper_clone).append($fromPaper_clone); animateLeft = 0; } //动画区被加载，同时tab页高度改变，真实tab透明隐藏 $tabPaper.append($animateArea); $tabPaper.height(paperHeight); $tabPapers.css({\”opacity\”: 0, filter: \”alpha(opacity=0)\”}); //执行动画，动画结束后remove掉动画区，直接定位并显示出真实tab页内容 animating = true; $animateArea.animate({left: animateLeft}, 500, \”easeOutQuint\”, function () { $animateArea.remove(); changePaper(the); $tabPapers.css({\”opacity\”: 1, filter: \”alpha(opacity=100)\”}); animating = false; }); } } }); }});
效果预览~~
在线代码调试：地址
查看完整代码及详细内容：http://www.gbtags.com/gb/share/5781.htm
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
