<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>JS 移动端的Tab触屏滑动特效</title>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/TouchSlide.1.0.js"></script>
<style>
a{text-decoration:none;color:#000;}
.tabBox .hd{ height:40px; line-height:40px; padding:0 10px; font-size:20px; background:#F3F3F3; border-top:2px solid #CECECE; }
.tabBox .hd ul{ overflow:hidden; }
.tabBox .hd ul li{ float:left; margin:0 10px; color:#515151; }
.tabBox .hd ul .on{ border-bottom:2px solid #BA2636; color:#BA2636; }
.tabBox .hd ul .on a{ display:block;}
.tabBox .bd ul{ padding:10px 0 10px 10px; }
.tabBox .bd li{ height:33px; line-height:33px; }
.tabBox .bd a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }
.tabBox .bd li a{ color:#555; }
.tabBox .bd .t{ height:85px; overflow:hidden; }
.tabBox .bd .t .pic{ width:130px; float:left; }
.tabBox .bd .t .con{ margin-left:130px; line-height:20px; }
.tabBox .bd .t .con p{ font-size:12px; color:#999; }
</style>
</head>
<body>
<div id="leftTabBox" class="tabBox">
<div class="hd">
<ul>
<li><a href="#">列表一</a></li>
<li><a href="#">列表二</a></li>
<li><a href="#">列表三</a></li>
</ul>
</div>
<div class="bd">
<ul>
<li class="t">
<div class="pic"><img src="img/wyNewPic.jpg" /></div>
<div class="con">
<a class="tit">onestopweb</a>
<p>悲回风之摇蕙兮，心冤结而内伤。 物有微而陨性兮，声有隐而先倡。</p>
</div>
</li>
<li><a href="#">阅谁问君诵，水落清香浮1</a></li>
<li><a href="#">阅谁问君诵，水落清香浮1</a></li>
<li><a href="#">阅谁问君诵，水落清香浮1</a></li>
<li><a href="#">阅谁问君诵，水落清香浮1</a></li>
<li><a href="#">阅谁问君诵，水落清香浮1</a></li>
</ul>
<ul>
<li><a href="#">阅谁问君诵，水落清香浮2</a></li>
<li><a href="#">阅谁问君诵，水落清香浮2</a></li>
<li><a href="#">阅谁问君诵，水落清香浮2</a></li>
<li><a href="#">阅谁问君诵，水落清香浮2</a></li>
<li><a href="#">阅谁问君诵，水落清香浮2</a></li>
<li><a href="#">阅谁问君诵，水落清香浮2</a></li>
<li><a href="#">阅谁问君诵，水落清香浮2</a></li>
<li><a href="#">阅谁问君诵，水落清香浮2</a></li>
</ul>
<ul>
<li><a href="#">阅谁问君诵，水落清香浮3</a></li>
<li><a href="#">阅谁问君诵，水落清香浮3</a></li>
<li><a href="#">阅谁问君诵，水落清香浮3</a></li>
<li><a href="#">阅谁问君诵，水落清香浮3</a></li>
<li><a href="#">阅谁问君诵，水落清香浮3</a></li>
<li><a href="#">阅谁问君诵，水落清香浮3</a></li>
<li><a href="#">阅谁问君诵，水落清香浮3</a></li>
<li><a href="#">阅谁问君诵，水落清香浮3</a></li>
</ul>
</div>
</div>
<script type="text/javascript">TouchSlide({ slideCell:"#leftTabBox" });</script>
</body>
</html>
效果图：
相关推荐
首先，触屏滑动特效插件的核心是JavaScript脚本，如"TouchSlide.1.1.source.js"和"TouchSlide.1.1.js"，它们负责处理用户的触摸事件，识别滑动、点击等手势，并根据预设的规则执行相应的动画效果。JavaScript在前端...
在这个案例中，`swiperTab`可能被定制或扩展，以适应导航栏菜单的需求，实现触屏上的滑动切换。 在实际应用中，"jQuery移动端导航栏滑动菜单"可能包含以下步骤： 1. 初始化jQuery对象，加载1.10.2.min.js库。 2. ...
这款“swiper移动端滑动切换选项卡特效代码”正是基于 Swiper 库实现的一种具体应用场景。 在移动端设计中，选项卡切换是一种常见的交互方式，它允许用户通过简单的手势在不同的内容区域之间进行切换，而无需点击或...
接着，"TouchSlide1.1"则是一款专注于触屏设备的滑动特效插件，特别适合在智能手机和平板电脑上使用。它优化了触摸操作，使得用户可以通过滑动手指来浏览内容，增强与网页的互动性。TouchSlide1.1不仅支持基本的滑动...
在"jQuery移动端导航栏滑动菜单特效代码"这个项目中，开发者利用`jQuery 1.10.2`版本来创建了一个适用于手机和平板等移动设备的导航菜单。 首先，我们需要了解`jQuery`的基础知识。`jQuery`简化了JavaScript的DOM...
总的来说，"jQuery手机触屏滑动切换选项卡代码"是一个实用的移动端交互设计，它结合了jQuery的强大功能和触摸事件，提供了流畅的用户体验。通过学习和实践这个案例，开发者可以提升自己在移动Web开发领域的技能，...
Swiper.js是一款强大的JavaScript滑动框架，专为触摸设备设计，广泛应用于移动端网页开发，尤其是对于创建响应式的滑动内容，如幻灯片、选项卡等。在移动设备上，Swiper.js能够提供平滑的触摸滑动体验，使得用户可以...
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...
6. **触屏优化**：考虑到移动设备的使用，需要适配触摸滑动事件，如`swipe`，可以使用jQuery Mobile或者其他触摸事件库来实现。 7. **响应式设计**：为了适应不同屏幕尺寸的设备，如手机、平板等，还需要考虑响应式...
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...
【jQuery手机触屏Tab选项卡特效代码】是一个专为移动端设计的交互效果，它利用了JavaScript库jQuery的强大功能，使得用户在触摸屏设备上可以通过左右滑动来切换不同的选项卡内容。这种效果不仅提升了用户体验，也使...
* javascript触屏滑动特效插件，移动端滑动特效，触屏焦点图，触屏Tab切换，触屏多图切换等 * 详尽信息请看官网：http://www.SuperSlide2.com/TouchSlide/ * * Copyright 2013 大话主席 * * 请尊重原创，保留...
【手机新闻网站tab特效】是一种常见的网页交互设计，主要用于移动端的新闻或资讯类网站，以提升用户体验和信息的可读性。在手机屏幕上空间有限，Tab特效能够有效地组织和展示大量内容，用户只需轻触不同的Tab，即可...
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...