欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

移动端tab切换滑动效果touchslide

程序员文章站 2023-12-24 17:26:09
...
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport"  content="width=device-width,user-scalable=no">
	<meta name="copyright" content="">
	<meta name="Keywords" content="">
	<meta name="description" content="">
	<title>TouchSlide左循环滑动 </title>
</head>
<script src="../TouchSlide.1.1.js"></script>
<style type="text/css">
	/* css 重置 */
	body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form { margin: 0; padding: 0; list-style: none; vertical-align: middle; font-weight:normal; }
	img { border:0; margin: 0; padding: 0;   }
	body { color: #000; -webkit-user-select: none;  }
	a{text-decoration:none;color:#000;}
	body{ background:#f4f4f4;  }
	#content{background:#fff;  }
	.tabBox .hd{ height:40px; line-height:40px; padding:0 10px; font-size:20px; background:#f4f4f4;  position:relative;  }
	.tabBox .hd ul{ position:absolute; height:41px; top:0; overflow:hidden;  }
	.tabBox .hd ul li{ float:left; padding:0 10px; color:#666; display:block; }
	.tabBox .hd ul .on{ border-bottom:2px solid #F5AB38;  }
	.tabBox .bd li{ height:333px; line-height:333px;   }
</style>

<body>

			<div id="leftTabBox" class="tabBox">
				<div class="hd">
					<ul>
						<li>国内</li>
						<li>国际</li>
						<li>时事</li>
					</ul>
				</div>
				<div class="bd">
						<ul>
							<li>官方明确感染H7N9高危人群</li>
						</ul>
						<ul>
							<li>日:沈阳军区部队开赴中朝边境</li>
						</ul>
						<ul>
							<li>农业占GDP低*支持力度大</li>
						</ul>
				</div>
			</div>
			<script type="text/javascript">
			TouchSlide({ slideCell:"#leftTabBox",effect:"leftLoop" }); 
			</script>

</body>
</html>

借鉴http://www.SuperSlide2.com/TouchSlide/demo.html

上一篇:

下一篇: