友情提示：所有特效效果均是GIF图片演示(均有源码下载)，所以这个博文可能加载的比较慢，请谅解。

凛冬将至(Winter Is Coming)。说到年终奖是不是很多人开始意yin了？

本文中所有给出的特效都是本人将一些需要引入的js或者css文件传到local经过测试以后展示给大家的。如果大家在调试的时候有问题可以随时提出来。因为每个案例代码都太多了，所以所有代码都只给出部分主要代码(便于大家在得到源码之前，可以更好的读懂特效)，当然大家也可以根据右下方的导航栏直接看特效，在看了效果图以后对某个特效有兴趣，这里我会对应的提供源码下载地址。

2.1.html代码： 

迈瑞宝报价：11.99-23.69万车身结构：三箱油耗：8.3-12.0L索纳塔8报价：13.39-22.59万车身结构：三箱油耗：9.0-12.0LK5报价：10.88-25.58万车身结构：三箱油耗：8.4-13.0L

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代码： 

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]]; }

Demo中关于汽车相关参数均来自某车之家，其真实性不在此次讨论范围内，咱们只看效果。

https://github.com/toutouge/WebProject/tree/master/PictureSwitch1

3.1.html代码： 

3.2.css代码： 

.ft-prev, .ft-next { background-color: #000; padding: 0 10px; color:#fff; }

3.3.js代码：