本文实例讲述了JS实现的另类手风琴效果网页内容切换代码。分享给大家供大家参考。具体如下：
这是一款以海贼王为题材的另类手风琴效果，用到三张背景图片，请顺着代码自已下载吧，多看看类似特效的编写思路，对于提高你的Js编程水平有不少帮助的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-sfq-web-cha-style-codes/
具体代码如下：
海贼王 body{margin:0px;padding:0px;overflow:hidden;background:#151515;} #box{width:710px;height:350px;padding:2px 0 2px 2px;margin:210px auto;background:#111;} #box ul{margin:0px;padding:0px;float:left;} #box li{width:75px;height:350px;float:left;display:inline;margin-right:2px;overflow:hidden;list-style-type:none;position:relative;} .pos1, .pos2, .pos3, .pos4, .pos5{width:75px;height:350px;float:left;text-decoration:none;} .pos1 span, .pos2 span, .pos3 span, .pos4 span, .pos5 span{width:75px;height:350px;float:left;top:0px;left:0px;filter:alpha(opacity=10);opacity:0.1;overflow:hidden;position:absolute; text-decoration:none;} .pos1 span.preview{background:url(images/bw.jpg) no-repeat;} .pos1 span.img_pre{left:75px;background:url(images/color.jpg) no-repeat;} .pos2 span.preview{background:url(images/bw.jpg) no-repeat -75px 0;} .pos2 span.img_pre{left:75px;background:url(images/color.jpg) no-repeat -75px 0;} .pos3 span.preview{background:url(images/bw.jpg) no-repeat -152px 0;} .pos3 span.img_pre{left:75px;filter:alpha(opacity=100);opacity:1;background:url(images/color.jpg) no-repeat -152px 0;} .pos4 span.preview{background:url(images/bw.jpg) no-repeat -228px 0;} .pos4 span.img_pre{left:75px;background:url(images/color.jpg) no-repeat -228px 0;} .pos5 span.preview{background:url(images/bw.jpg) no-repeat -303px 0;} .pos5 span.img_pre{left:75px;background:url(images/color.jpg) no-repeat -303px 0;} .inner {width:280px;height:310px;float:left;padding:20px;background:#fff;overflow:hidden;border-right:5px solid #f0f0f0; position:absolute;top:0px;left:75px;} .inner h2{width:280px;height:60px;float:left;color:#555555;font-family:"微软雅黑";line-height:60px;font-size:18px;text-indent:10px;margin:0px;padding:0px;background:url(images/stripe_light.gif);} .inner h3{width:280px;height:40px;float:left;color:#fff;font-family:"微软雅黑";line-height:40px;font-size:14px;text-indent:10px;margin:0px;padding:0px;background:url(images/stripe.gif);} .inner p{width:260px;height:200px;float:left;color:#000;font-family:"微软雅黑";line-height:25px;font-size:12px;margin:0px;padding:0px 10px;} 乌索普 草帽海贼团【狙击手】 悬赏：3000万（司法岛事件）
罗罗诺亚·索隆 草帽海贼团【剑士】 悬赏：6千万（阿拉巴斯坦事件）→1亿2000万（司法岛事件）
蒙其·D·路飞 草帽海贼团【船长】 恶魔果实：橡胶果实
悬赏：3千万（可可亚西村事件）→1亿（阿拉巴斯坦事件）→3亿（司法岛事件)→4亿（顶上战争后）娜美 草帽海贼团【航海士】 悬赏：1600万（司法岛事件）
香吉士 草帽海贼团【厨师】 悬赏：7700万（司法岛事件）
希望本文所述对大家的Javascript程序设计有所帮助。
