JS实现的另类手风琴效果网页内容切换代码

300 阅读 0 评论 198 点赞

我是靠谱客的博主能干手机，这篇文章主要介绍JS实现的另类手风琴效果网页内容切换代码，现在分享给大家，希望可以做个参考。

本文实例讲述了JS实现的另类手风琴效果网页内容切换代码。分享给大家供大家参考。具体如下：

这是一款以海贼王为题材的另类手风琴效果，用到三张背景图片，请顺着代码自已下载吧，多看看类似特效的编写思路，对于提高你的Js编程水平有不少帮助的。

运行效果截图如下：

在线演示地址如下：

http://demo.uoften.com/js/2015/js-sfq-web-cha-style-codes/

具体代码如下：

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>海贼王</title>
<style type="text/css">
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;}
</style>
<script type="text/javascript">
window.onload = function(){
 var oBox = document.getElementById('box');
 var aLi = oBox.getElementsByTagName('li');
 var aA = oBox.getElementsByTagName('a');
 var aPrev = getClass(oBox, 'preview');
 var aImg = getClass(oBox, 'img_pre');
 var i = 0;
 for(i=0;i<aA.length;i++){
  aA[i].index = i;
  aA[i].onclick = function(){
   for(i=0;i<aLi.length;i++){
    if(aLi[this.index].style.width != '400px')startMove(aLi[i], {width:75}, 5);
    startMove(aPrev[i], {opacity:10}, 5);
    startMove(aImg[i], {opacity:0, left:75}, 5);
   }
   if(aLi[this.index].style.width != '400px'){
    startMove(oBox, {width:710}, 5);
    startMove(aImg[this.index], {opacity:100, left:0}, 5);
    startMove(aLi[this.index], {width:400}, 5);
   }else{
    startMove(aLi[this.index], {width:75}, 5);
    for(i=0;i<aLi.length;i++){
     startMove(aPrev[i], {opacity:100}, 5);
    }
    startMove(oBox, {width:385}, 5);
   }
  };
 }
};
function getClass(oParent, sClass){
 var aElem = oParent.getElementsByTagName('*');
 var aClass = [];
 var i = 0;
 for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
 return aClass;
}
function startMove(obj, json, iT, fnEnd){
 if(obj.timer)clearInterval(obj.timer);
 obj.timer = setInterval(function (){
  doMove(obj, json, iT, fnEnd);
 }, 30);
}
function getStyle(obj, attr){
 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function doMove(obj, json, iT, fnEnd){
 var iCur = 0;
 var attr = '';
 var bStop = true;
 for(attr in json){
  attr == 'opacity' ? iCur = parseInt(100*parseFloat(getStyle(obj, 'opacity'))) : iCur = parseInt(getStyle(obj, attr));
  if(isNaN(iCur))iCur = 0;
  var iSpeed = (json[attr]-iCur) / iT;
  iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  if(parseInt(json[attr])!=iCur)bStop = false;
  if(attr=='opacity'){
   obj.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")";
   obj.style.opacity = (iCur + iSpeed) / 100;
  }else{
   attr == 'zIndex' ? obj.style[attr] = iCur + iSpeed : obj.style[attr] = iCur + iSpeed +'px';
  }
 }
 if(bStop){
  clearInterval(obj.timer);
  obj.timer = null;  
  if(fnEnd)fnEnd();
 }
}
</script>
</head>
<body>
<div id="box">
 <li>
  <a href="javascript：;" class="pos1">
  <span class="preview"></span>
  <span class="img_pre"></span>
 </a>
 <div class="inner">
  <h2>乌索普</h2>
  <h3>草帽海贼团【狙击手】</h3>
  <p>悬赏：3000万（司法岛事件）</p>
 </div>
 </li>
 <li>
  <a href="javascript：;" class="pos2">
  <span class="preview"></span>
  <span class="img_pre"></span>
 </a>
 <div class="inner">
  <h2>罗罗诺亚·索隆</h2>
  <h3>草帽海贼团【剑士】</h3>
  <p>悬赏：6千万（阿拉巴斯坦事件）→1亿2000万（司法岛事件）</p>
 </div>
 </li>
 <li style="width:400px;">
  <a href="javascript：;" class="pos3">
  <span class="preview"></span>
  <span class="img_pre" style="left:0px;"></span>
 </a>
 <div class="inner">
  <h2>蒙其·D·路飞</h2>
  <h3>草帽海贼团【船长】</h3>
  <p>恶魔果实：橡胶果实<br />悬赏：3千万（可可亚西村事件）→1亿（阿拉巴斯坦事件）→3亿（司法岛事件)→4亿（顶上战争后）</p>
 </div>
 </li>
 <li>
  <a href="javascript：;" class="pos4">
  <span class="preview"></span>
  <span class="img_pre"></span>
 </a>
 <div class="inner">
  <h2>娜美</h2>
  <h3>草帽海贼团【航海士】</h3>
  <p>悬赏：1600万（司法岛事件）</p>
 </div>
 </li>
 <li>
  <a href="javascript：;" class="pos5">
  <span class="preview"></span>
  <span class="img_pre"></span>
 </a>
 <div class="inner">
  <h2>香吉士</h2>
  <h3>草帽海贼团【厨师】</h3>
  <p>悬赏：7700万（司法岛事件）</p>
 </div>
 </li>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>海贼王</title>
<style type="text/css">
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;}
</style>
<script type="text/javascript">
window.onload = function(){
 var oBox = document.getElementById('box');
 var aLi = oBox.getElementsByTagName('li');
 var aA = oBox.getElementsByTagName('a');
 var aPrev = getClass(oBox, 'preview');
 var aImg = getClass(oBox, 'img_pre');
 var i = 0;
 for(i=0;i<aA.length;i++){
  aA[i].index = i;
  aA[i].onclick = function(){
   for(i=0;i<aLi.length;i++){
    if(aLi[this.index].style.width != '400px')startMove(aLi[i], {width:75}, 5);
    startMove(aPrev[i], {opacity:10}, 5);
    startMove(aImg[i], {opacity:0, left:75}, 5);
   }
   if(aLi[this.index].style.width != '400px'){
    startMove(oBox, {width:710}, 5);
    startMove(aImg[this.index], {opacity:100, left:0}, 5);
    startMove(aLi[this.index], {width:400}, 5);
   }else{
    startMove(aLi[this.index], {width:75}, 5);
    for(i=0;i<aLi.length;i++){
     startMove(aPrev[i], {opacity:100}, 5);
    }
    startMove(oBox, {width:385}, 5);
   }
  };
 }
};
function getClass(oParent, sClass){
 var aElem = oParent.getElementsByTagName('*');
 var aClass = [];
 var i = 0;
 for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
 return aClass;
}
function startMove(obj, json, iT, fnEnd){
 if(obj.timer)clearInterval(obj.timer);
 obj.timer = setInterval(function (){
  doMove(obj, json, iT, fnEnd);
 }, 30);
}
function getStyle(obj, attr){
 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function doMove(obj, json, iT, fnEnd){
 var iCur = 0;
 var attr = '';
 var bStop = true;
 for(attr in json){
  attr == 'opacity' ? iCur = parseInt(100*parseFloat(getStyle(obj, 'opacity'))) : iCur = parseInt(getStyle(obj, attr));
  if(isNaN(iCur))iCur = 0;
  var iSpeed = (json[attr]-iCur) / iT;
  iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  if(parseInt(json[attr])!=iCur)bStop = false;
  if(attr=='opacity'){
   obj.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")";
   obj.style.opacity = (iCur + iSpeed) / 100;
  }else{
   attr == 'zIndex' ? obj.style[attr] = iCur + iSpeed : obj.style[attr] = iCur + iSpeed +'px';
  }
 }
 if(bStop){
  clearInterval(obj.timer);
  obj.timer = null;  
  if(fnEnd)fnEnd();
 }
}
</script>
</head>
<body>
<div id="box">
 <li>
  <a href="javascript：;" class="pos1">
  <span class="preview"></span>
  <span class="img_pre"></span>
 </a>
 <div class="inner">
  <h2>乌索普</h2>
  <h3>草帽海贼团【狙击手】</h3>
  <p>悬赏：3000万（司法岛事件）</p>
 </div>
 </li>
 <li>
  <a href="javascript：;" class="pos2">
  <span class="preview"></span>
  <span class="img_pre"></span>
 </a>
 <div class="inner">
  <h2>罗罗诺亚·索隆</h2>
  <h3>草帽海贼团【剑士】</h3>
  <p>悬赏：6千万（阿拉巴斯坦事件）→1亿2000万（司法岛事件）</p>
 </div>
 </li>
 <li style="width:400px;">
  <a href="javascript：;" class="pos3">
  <span class="preview"></span>
  <span class="img_pre" style="left:0px;"></span>
 </a>
 <div class="inner">
  <h2>蒙其·D·路飞</h2>
  <h3>草帽海贼团【船长】</h3>
  <p>恶魔果实：橡胶果实<br />悬赏：3千万（可可亚西村事件）→1亿（阿拉巴斯坦事件）→3亿（司法岛事件)→4亿（顶上战争后）</p>
 </div>
 </li>
 <li>
  <a href="javascript：;" class="pos4">
  <span class="preview"></span>
  <span class="img_pre"></span>
 </a>
 <div class="inner">
  <h2>娜美</h2>
  <h3>草帽海贼团【航海士】</h3>
  <p>悬赏：1600万（司法岛事件）</p>
 </div>
 </li>
 <li>
  <a href="javascript：;" class="pos5">
  <span class="preview"></span>
  <span class="img_pre"></span>
 </a>
 <div class="inner">
  <h2>香吉士</h2>
  <h3>草帽海贼团【厨师】</h3>
  <p>悬赏：7700万（司法岛事件）</p>
 </div>
 </li>
</div>
</body>
</html>