凜冬將至，用幾款特效暖暖身

友情提示：所有特效效果均是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
                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" 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/
關於作者：專注於基礎平台的項目開發。如有問題或建議，請多多賜教！
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角【推薦】一下。您的鼓勵是作者堅持原創和持續寫作的最大動力！