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

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/

关于作者：专注于微软平台的项目开发。如有问题或建议，请多多赐教！

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！

// /*回到顶部*/
$(function () {
$("#post-up").live("click", function () {
$("#div_digg .diggit").click();
});
});
// ]]>