凛冬将至，用几款特效暖暖身

友情提示：所有特效效果均是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="img/1.jpg" />
        <img src="img/2.jpg" />
        <img src="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
                 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 + '
' + 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" class="cover" 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/
关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！