滑动展示窗
又是一个挖坟的POST.
这段短短50行的JS滑动窗效果，算是我的第二次JS编写(2009-04-06)。最后作为了毕业论文网站的一个小插曲。
<!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>
<title>Slide</title>
</pre>
<pre lang="css" line="5">
<style type="text/css">
body{
background:#f0f0f0;
font-family:Verdana;
color:#7c7c7c;
}
#container{
position:relative;
margin:0 auto;
width:800px;
height:600px;
border:1px solid #7c7c7c;
}
#scroll_section{
overflow:hidden;
position:relative;
width:670px;
height:440px;
margin:0 auto;
border:1px solid #7c7c7c;
}
#scroll_content{
position:absolute;
top:0;
left:0;
width:4690px;
}
#scroll_content div{
float:left;
width:670px;
height:440px;
}
ul{
width:568px;
height:25px;
list-style:none;
margin:25px auto 0 auto;
padding:0;
}
li{
text-align:center;
margin:0;
width:80px;
height:25px;
line-height:25px;
float:left;
}
li a{
color:#7c7c7c;
font-family:Verdana;
border-left:1px solid #7c7c7c;
text-decoration:none;
display:block;
}
li#tab_7 a{
border-right:1px solid #7c7c7c;
}
li.active a{
color:red;
}
li a:hover{
color:red;
background:#f1f0f0;
}
#left_arrow{
position:absolute;
left:15px;
top:50%;
width:30px;
height:30px;
line-height:30px;
text-align:center;
}
#right_arrow{
position:absolute;
right:15px;
top:50%;
width:30px;
height:30px;
line-height:30px;
text-align:center;
}
#left_arrow a,#right_arrow a{
text-decoration:none;
display:block;
color:#7c7c7c;
font-size:16px;
border:1px solid #7c7c7c;
}
#left_arrow a:hover,#right_arrow a:hover{
color:red;
border:1px solid red;
}
h3{
margin:20px;padding:0;
}
h6{
margin:0;padding:0;
position:absolute;
bottom:10px;
right:10px;
}
h2{
margin:20px;padding:0;
width:200px;
border-bottom:1px solid #7c7c7c;
}
#scroll_section p{
margin:20px;
font-size:14px;
text-indent:2em;
}
img{
margin:0 20px 0 20px;padding:0;
}
</style>
<script type="text/javascript">
var currentTab = "tab_1";
var widthUnit = 670;
var maxTab = 7;
function srollArrow(direction,scrollSection){
if(direction=="left"){
if(currentTab.split("_")[1]=="1"){
nextTab = "tab_"+maxTab;
}else{
var nextTabNum = parseInt(currentTab.split("_")[1])-1;
nextTab = "tab_"+nextTabNum;
}
scrollTab(nextTab,scrollSection);
}else{
if(currentTab.split("_")[1]==maxTab){
nextTab = "tab_1";
}else{
var nextTabNum = parseInt(currentTab.split("_")[1])+1;
nextTab = "tab_"+nextTabNum;
}
scrollTab(nextTab,scrollSection);
}
}
var moveManager = {begin:0, end:0, change:0 ,finalPos:0 , time:18.0, limit:8.0};
function scrollTab(tabName,scrollContent){
if(currentTab == tabName){
return;
}
lastTab = currentTab;
currentTab = tabName;
document.getElementById(currentTab).className = "active";
document.getElementById(lastTab).className = "inactive";
moveManager.begin = parseInt(lastTab.split("_")[1]);
moveManager.end = parseInt(currentTab.split("_")[1]);
moveManager.change = (moveManager.begin - moveManager.end)*widthUnit;
moveManager.finalPos = -(moveManager.end-1)*widthUnit;
oScrollContent = document.getElementById(scrollContent);
nowLeft = parseInt(oScrollContent.style.left);
move();
}
function move(){
if(moveManager.time<=moveManager.limit){
oScrollContent.style.left = moveManager.finalPos + "px";
moveManager.time = 18.0;
return;
}
nowLeft += parseInt(moveManager.change*1/moveManager.time);
moveManager.time-=0.9;
oScrollContent.style.left = nowLeft + "px";
setTimeout("move()",15);
}
</script>
</head>
<body>
<div id="container">
<h2>Gallery</h2>
<ul id="nav">
<li id="tab_1" class="active"><a href="javascript:scrollTab('tab_1','scroll_content');" onFocus="this.blur()">first</a></li>
<li id="tab_2" class="inactive"><a href="javascript:scrollTab('tab_2','scroll_content');" onFocus="this.blur()">second</a></li>
<li id="tab_3" class="inactive"><a href="javascript:scrollTab('tab_3','scroll_content');" onFocus="this.blur()">third</a></li>
<li id="tab_4" class="inactive"><a href="javascript:scrollTab('tab_4','scroll_content');" onFocus="this.blur()">fourth</a></li>
<li id="tab_5" class="inactive"><a href="javascript:scrollTab('tab_5','scroll_content');" onFocus="this.blur()">fifth</a></li>
<li id="tab_6" class="inactive"><a href="javascript:scrollTab('tab_6','scroll_content');" onFocus="this.blur()">sixth</a></li>
<li id="tab_7" class="inactive"><a href="javascript:scrollTab('tab_7','scroll_content');" onFocus="this.blur()">seventh</a></li>
</ul>
<div id="scroll_section">
<div id="scroll_content" style="left:0px;">
<div id="content_1">
<h3>first page</h3>
<p>this demo is a little attachment of my graduation project.</p>
<p>world is different when we see it from different angles."Frog" or "White Horse"?</p>
<img src="http://home.blueidea.com/attachment/200901/8/491699_1231415853orB6.jpg" />
</div>
<div id="content_2">
<h3>second page</h3>
<p>I love my headphone.</p>
<p>K 701,Revolutionary flat-wire voice coil technology; Patented AKG Varimotion ultra-precision two-layer diaphragm; Bi-wiring, high-performance cable with 1/4" jack plug; Comfortable, specially shaped "3D-Form" ear pads; Complete with stylish storage cradle; Individually tested and numbered. </p>
<p>Experience pure perfection!Whether you prefer the holistic approach or like to listen analytically, the K 701 will turn perception into pure enjoyment. AKG is the first manufacturer in the world to use revolutionary flat-wire technology in headphones, namely, the K 701. The result is a truly dramatic sound that places every musician at their correct location with pinpoint accuracy. This kind of agility, spaciousness, brilliant highs, and velvety, punchy bass is simply miraculous. These superlative open-back dynamic headphones provide an outstandingly accurate sound and excellent imaging. Try the K 701 and find out what ingenious headphone engineering can do for you.</p>
</div>
<div id="content_3">
<h3>third page</h3>
<p>K 601,Patented varimotion diaphragm and high-performance neodymium magnet system for minimum distortion; Two-layer diaphragm for highly accurate sound and superior transient response ; Self-adjusting, genuine-leather headband for optimum comfort ; Individually tested and numbered ; Perfect wearing comfort. Self-adjusting, genuine leather headband for automatic fit and optimum wearing comfort ; Acoustically comfortable optimized ear pads and washable and easy to replace; True bi-wiring cable. </p>
<p>The next level of evolution,Precisely tailored response and cutting-edge design: a must for all audiophiles. These future-oriented, open-back dynamic headphones do not only offer good wearing comfort but also deliver an incredibly detailed, full, yet crisp sound. This is the result of a new AKG Varimotion two-layer diaphragm that ensures optimum diaphragm motion for extremely accurate highfrequency response and a powerful low end. The overall sound is uncommonly natural and open. In short, the K 601 are premium reference headphones for anyone who appreciates true high-end equipment. </p>
</div>
<div id="content_4">
<h3>fourth page</h3>
<p>I always collect brush,because it's the a kind of abstract.</p>
<img src="http://home.blueidea.com/attachment/200901/7/491699_12313391937zFk.jpg" />
<p>maybe we just see the abstract and naturally use the truth.</p>
</div>
<div id="content_5">
<h3>fifth page</h3>
<p>We change the world by our own hands. But now I only imagine the future.</p>
<img src="http://home.blueidea.com/attachment/200904/5/491699_12389084346614.jpg" />
</div>
<div id="content_6">
<h3>sixth page</h3>
<p>Forward, and I wish I should never stop!</p>
</div>
<div id="content_7">
<h3>seventh page</h3>
<p>This page is the end of glide gallery demo.</p>
<p>And next we will glide to fisrt page.</p>
</div>
</div>
</div>
<div id="left_arrow"><a href="javascript:srollArrow('left','scroll_content')" onFocus="this.blur()"><</a></div>
<div id="right_arrow"><a href="javascript:srollArrow('right','scroll_content')" onFocus="this.blur()">></a></div>
<h6>Glide Gallery Demo 1.0 by iifksp</h6>
</div>
</body>
</html>
同样的，最早发布在蓝色理想上：http://bbs.blueidea.com/thread-2920612-1-1.html ，而这，居然成为我至少是那之后的一年中的最后的JS代码。