友情提示：所有特效效果均是GIF图片演示(均有源码下载)，所以这个博文可能加载的比较慢，请谅解。
凛冬将至(Winter Is Coming)
，距北京供暖也没几天了，正在筹备全民抗寒工作。在这准备好迎接寒冬之际，先来几款前端特效暖暖身。可以在日后的寒冬里用来抗寒。本着对自己/对园友负责的态度，我这里提供的抗寒特效均是经过本人测试和研究过的，我会尽量将每款特效细化，详细介绍其使用方法或者注意事项，不好理解的地方加注释。力图通过这篇博文能让园友有所收获，欢度寒冬，坐等年终奖。说到年终奖是不是很多人开始意yin了？
v1.0写在前面
本文中所有给出的特效都是本人将一些需要引入的js或者css文件传到local经过测试以后展示给大家的。如果大家在调试的时候有问题可以随时提出来。因为每个案例代码都太多了，所以所有代码都只给出部分主要代码(便于大家在得到源码之前，可以更好的读懂特效)，当然大家也可以根据右下方的导航栏直接看特效，在看了效果图以后对某个特效有兴趣，这里我会对应的提供源码下载地址。
v2.0tab图片切换
2.1.html代码：
<div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">迈瑞宝</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">报价：11.99-23.69万</a></li> <li><a href="#">车身结构：三箱</a></li> <li><a href="#">油耗：8.3-12.0L</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">索纳塔8</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">报价：13.39-22.59万</a></li> <li><a href="#">车身结构：三箱</a></li> <li><a href="#">油耗：9.0-12.0L</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">K5</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">报价：10.88-25.58万</a></li> <li><a href="#">车身结构：三箱</a></li> <li><a href="#">油耗：8.4-13.0L</a></li> </ul> </li> </ul> </div>
2.2.css代码：
ul.menu > li > a{ float:left; width:265px; height:50px; margin-top:450px; text-align:center; line-height:50px; color:#ddd; background-color:#333; letter-spacing:1px; cursor:pointer; text-decoration:none; text-shadow:0px 0px 1px #fff;}ul.menu > li ul{ list-style:none; float:left; margin-top:-180px; width:100%; height:110px; padding-top:20px; background-repeat:no-repeat; background-color:transparent;}ul.menu > li ul li{ display:none;} ul.menu > li ul.sub1 { background-image: url('../img/bg1sub.png'); } ul.menu > li ul.sub2 { background-image: url('../img/bg2sub.png'); }ul.menu > li ul.sub3{ background-image:url(../img/bg3sub.png);}ul.menu > li ul li a{ color:#fff; text-decoration:none; line-height:30px; margin-left:20px; text-shadow:1px 1px 1px #444; font-size:11px;}ul.menu > li ul li a:hover{ border-bottom:1px dotted #fff;}ul.menu > li ul.sub1 li{ display:block;}2.3.js代码：
if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8 var oldCurCSS = jQuery.curCSS; jQuery.curCSS = function (elem, name, force) { if (name === 'background-position') { name = 'backgroundPosition'; } if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) { return oldCurCSS.apply(this, arguments); } var style = elem.style; if (!force && style && style[name]) { return style[name]; } return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force); }; } var oldAnim = $.fn.animate; $.fn.animate = function (prop) { if ('background-position' in prop) { prop.backgroundPosition = prop['background-position']; delete prop['background-position']; } if ('backgroundPosition' in prop) { prop.backgroundPosition = '(' + prop.backgroundPosition; } return oldAnim.apply(this, arguments); }; function toArray(strg) { strg = strg.replace(/left|top/g, '0px'); strg = strg.replace(/right|bottom/g, '100%'); strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2"); var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]]; }2.4.代码效果：
Demo中关于汽车相关参数均来自某车之家，其真实性不在此次讨论范围内，咱们只看效果。
2.5.源码下载：
https://github.com/toutouge/WebProject/tree/master/PictureSwitch1
v3.0索引图片切换
3.1.html代码：
<div id="slideshowHolder"> <img src='/images/loading.gif' data-original="img/1.jpg" /> <img src='/images/loading.gif' data-original="img/2.jpg" /> <img src='/images/loading.gif' data-original="img/3.jpg" /> </div>
3.2.css代码：
.ft-prev, .ft-next { background-color: #000; padding: 0 10px; color:#fff; }3.3.js代码：
$(document).ready(function () { $('#slideshowHolder').jqFancyTransitions({ effect: '', // wave, zipper, curtain width: 500, // width of panel height: 700, // height of panel strips: 20, // number of strips delay: 5000, // delay between images in ms stripDelay: 50, // delay beetwen strips in ms titleOpacity: 0.7, // opacity of title titleSpeed: 1000, // speed of title appereance in ms position: 'alternate', // top, bottom, alternate, curtain direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate navigation: true, // prev and next navigation buttons links: true // show images as links }); });3.4.代码效果：
3.5.源码下载：
https://github.com/toutouge/WebProject/tree/master/PictureSwitch2
v4.0统计图
4.1.html代码：
<div id="content"> <div class="legend"> <h1>汽车销量:</h1> <div class="skills"> <ul> <li class="jq">大众</li> <li class="css">丰田</li> <li class="html">别克</li> <li class="php">福特</li> <li class="sql">长安</li> </ul> </div> </div> <div id="diagram"></div> </div> <div class="get"> <div class="arc"> <span class="text">大众</span> <input type="hidden" class="percent" value="95" /> <input type="hidden" class="color" value="#97BE0D" /> </div> <div class="arc"> <span class="text">丰田</span> <input type="hidden" class="percent" value="90" /> <input type="hidden" class="color" value="#D84F5F" /> </div> <div class="arc"> <span class="text">别克</span> <input type="hidden" class="percent" value="80" /> <input type="hidden" class="color" value="#88B8E6" /> </div> <div class="arc"> <span class="text">福特</span> <input type="hidden" class="percent" value="53" /> <input type="hidden" class="color" value="#BEDBE9" /> </div> <div class="arc"> <span class="text">长安</span> <input type="hidden" class="percent" value="45" /> <input type="hidden" class="color" value="#EDEBEE" /> </div> </div>
4.2.css代码：
#content {position:absolute;top:50%;left:50%;margin:-340px 0 0 -450px;width:900px;height:600px;}.legend {float:left;width:250px;margin-top:140px;}#content h1 {font-family:'Cabin Sketch', arial, serif;text-shadow:3px 3px 0 #ddd;color:#193340;font-size:40px;margin-bottom:40px;text-align:right;}.skills {float:left;clear:both;width:100%;}.skills ul,.skills li {display:block;list-style:none;margin:0;padding:0;}.skills li {float:right;clear:both;padding:0 15px;height:35px;line-height:35px;color:#fff;margin-bottom:1px;font-size:18px;}4.3.js代码：
var o = { init: function () { this.diagram(); }, random: function (l, u) { return Math.floor((Math.random() * (u - l + 1)) + l); }, diagram: function () { var r = Raphael('diagram', 600, 600), rad = 73; r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' }); var title = r.text(300, 300, 'loading...').attr({ font: '20px Arial', fill: '#fff' }).toFront(); r.customAttributes.arc = function (value, color, rad) { var v = 3.6 * value, alpha = v == 360 ? 359.99 : v, random = o.random(91, 240), a = (random - alpha) * Math.PI / 180, b = random * Math.PI / 180, sx = 300 + rad * Math.cos(b), sy = 300 - rad * Math.sin(b), x = 300 + rad * Math.cos(a), y = 300 - rad * Math.sin(a), path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]]; return { path: path, stroke: color } } $('.get').find('.arc').each(function (i) { var t = $(this), color = t.find('.color').val(), value = t.find('.percent').val(), text = t.find('.text').text(); rad += 30; var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 }); z.mouseover(function () { this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic'); if (Raphael.type != 'VML') //solves IE problem this.toFront(); title.animate({ opacity: 0 }, 500, '>', function () { this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, 500, '<'); }); }).mouseout(function () { this.animate({ 'stroke-width': 26, opacity: 1 }, 1000, 'elastic'); }); }); } } $(function () { o.init(); });4.4.代码效果：
4.5.源码下载：
https://github.com/toutouge/WebProject/tree/master/StatisticalGaphs
v5.0滚动条分页
5.1.html代码：
<ol class="curtains"> <!--<li id="section-1" data-parallax-background="-.05">--> <li id="section-1" class="cover"> <header data-fade="550" data-slow-scroll="3"> <h1>博客园</h1> <h2>请叫我头头哥，www.cnblogs.com/toutou</h2> </header> </li> <li id="section-2"> <article> <h4>博客园</h4> <hr> <p style="text-indent:2em;"> 博客园创建于2004年1月，博客园诞生于江苏扬州这样一个IT非常落后的小城市， 城市虽小，但是这里却有很多求知创新的人，博客园诞生的理由是如此简单。 </p> <p style="text-indent:2em;"> 一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间，博客园很长时间只有一个不能再简单的博客， 有近四年，博客园仅靠一个人几年工作的积蓄在维持，互联网浪潮的此起彼伏，“博客”从耀眼的明星成为平民<br /> ，这些似乎都与博客园无关，博客园一步一个脚印地走着自己的路，傻傻地对每个用户注册进行人工审批、 对首页内容宁缺毋滥、对不合适的广告拒之门外，傻傻地对用户体验关怀备至，对盈利模式冷若冰霜。 </p> <h4>发展历程</h4> <hr> <p>2006年9月 博客园到北京发展。</p> <p>2007年9月 博客园来到上海发展。</p> <p>2008年3月 博客园团队成立。</p> <p></p> <p class="align-center"> <a href="http://www.cnblogs.com/" class="button">看看博客园</a> </p> </article> </li> </ol>
5.2.css代码：
/* Sliding panels */.curtains>li { background:#FFF url(../img/blizzard.png); box-shadow:0 0 12px #666;} .curtains>li:last-child{box-shadow:none}/* MENU */#menu{ position:fixed; top:20px; left:20px; z-index:20; padding:10px; background-color:#000;} #menu li{margin:0} #menu a{ margin:0; color:#FFF; }/* Section 1 */#section-1 { background: url(../img/eiffel-2.jpg) 50% 0 no-repeat; background-size: cover;} #section-1 header{ color:#FFF; position:absolute; top:30%; left:50%; margin:0 0 0 -350px; width:700px; text-align:center; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); line-height:1.1; } #section-1 h1{ font-size:120px; } #section-1 h2{ text-transform:capitalize; opacity:.75; font-size:48px; }5.3.js代码：
scrollToPosition: function (direction) { var position = null, self = this; if (self.scrollEl.is(':animated')) { return false; } if (direction === 'up' || direction == 'down') { // Keyboard event var $next = (direction === 'up') ? self.$current.prev() : self.$current.next(); // Step in the current panel ? if (self.$step) { if (!self.$current.find('.current-step').length) { self.$step.eq(0).addClass('current-step'); } var $nextStep = (direction === 'up') ? self.$current.find('.current-step').prev('.step') : self.$current.find('.current-step').next('.step'); if ($nextStep.length) { position = (self.options.mobile) ? $nextStep.position().top + self.$elDatas[self.$current.index()]['data-position'] : $nextStep.position().top + self.$elDatas[self.$current.index()]['data-position']; } } position = position || ((self.$elDatas[$next.index()] === undefined) ? null : self.$elDatas[$next.index()]['data-position']); if (position !== null) { self.scrollEl.animate({ scrollTop: position }, self.options.scrollSpeed, self.options.easing); } } else if (direction === 'top') { self.scrollEl.animate({ scrollTop: 0 }, self.options.scrollSpeed, self.options.easing); } else if (direction === 'bottom') { self.scrollEl.animate({ scrollTop: self.options.bodyHeight }, self.options.scrollSpeed, self.options.easing); } else { var index = $("#" + direction).index(), speed = Math.abs(self.currentIndex - index) * (this.options.scrollSpeed * 4) / self.$liLength; self.scrollEl.animate({ scrollTop: self.$elDatas[index]['data-position'] || null }, (speed <= self.options.scrollSpeed) ? self.options.scrollSpeed : speed, this.options.easing); } }5.4.代码效果：
5.5.源码下载：
https://github.com/toutouge/WebProject/tree/master/SpecialPage
v6.0博客总结
关于第一波特效就这么多，如果大家觉得可以就点个赞，后续我再考虑是否继续追加。
在北京的小伙伴们要做好防寒工作了，北京上周已经下雪了。上周五那家伙早上一起床，窗外全白花花的。
PS：北京的确雾霾多，但是照片里雾蒙蒙的效果不是雾霾，只是我早上醒的早，早上的时候拍的。
作 者：请叫我头头哥
出 处：http://www.cnblogs.com/toutou/
关于作者：专注于微软平台的项目开发。如有问题或建议，请多多赐教！
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！
原标题：凛冬将至，用几款特效暖暖身
关键词：
我知道了 