滑动展示窗

技术文章

滑动展示窗

时间：2009-04-09 点击：1697

<!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>滑动展示窗</title>
		<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>

右下角提示窗口

动态给已知ID的控件中的控件赋值

获取input文本框的上下td对象

鼠标滑过缩略图显示大图

表格table数据过滤

> 返回

地址：上海市普陀区胶州路941号长久商务中心电话： QQ：