手机端的tab切换，响应式切换效果

之前写过这些tab切换的效果，无论网页上还是手机端，网上也有很多的例子，这个好像是我参考网上，也不知道是哪里的了。总结了一下，就当保存下来了把。

<!DOCTYPE html >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="black" name="apple-mobile-web-app-status-bar-style">

    <meta content="telephone=no" name="format-detection">

    <meta content="email=no" name="format-detection">

<title>tab响应式切换效果</title>

<link rel="stylesheet" href="css/activitylist.css">

</head>

<body>

<!-- 代码部分begin -->

<div class="wrap">

    <div class="tabs">

        <a href="#" hidefocus="true" class="active">已审核</a>

        <a href="#" hidefocus="true">未审核</a>

    </div>

    <div class="swiper-container">

        <div class="swiper-wrapper">

        <div class="swiper-slide">

           <div class="content-slide">

                <a class="list" href="">

                     <span class="list_msg">

                         <img  class="list_img" alt=""src="headImg.jpg" />

                         <span class="list_nt ">

                             <span class="list_name" href="">xiuber</span><br />

                             <span class="list_time" href="">2016-5-23 11:14</span>

                         </span>

                     </span>

                 </a>

                <a class="list" href="">

                     <span class="list_msg">

                         <img  class="list_img" alt=""src="headImg.jpg" />

                         <span class="list_nt">

                             <span class="list_name" href="">xiuber</span><br />

                             <span class="list_time" href="">2016-5-23 11:14</span>

                         </span>

                     </span>

                </a>

            </div>

          </div>

        <div class="swiper-slide" >

            <div class="content-slide">

              <a class="list" href="">

                 <span class="list_msg">

                     <img  class="list_img" alt=""src="headImg.jpg" />

                     <span class="list_nt ">

                         <span class="list_name" href="">xiuber</span><br />

                         <span class="list_time" href="">2016-5-23 11:14</span>

                     </span>

                 </span>

               </a>

            </div>

          </div>

      </div>

   </div>

</div>

<script src="jquery-1.11.3.js"></script>

<script src="swiper.min.js"></script>

<script>

var tabsSwiper = new Swiper('.swiper-container',{

    speed:500,

    onSlideChangeStart: function(){

        $(".tabs .active").removeClass('active');

        $(".tabs a").eq(tabsSwiper.activeIndex).addClass('active');

    }

});

$(".tabs a").on('touchstart mousedown',function(e){

    e.preventDefault()

    $(".tabs .active").removeClass('active');

    $(this).addClass('active');

    tabsSwiper.swipeTo($(this).index());

});

$(".tabs a").click(function(e){

    e.preventDefault();

});

</script>

<!-- 代码部分end -->

</body>

</html>

/******/

html,body,.wrap,.swiper-container,.swiper-wrapper{

    height:100%!important;

    }

body{margin:;font-family:"microsoft yahei";font-size:13px;line-height:1.5;padding: 10px;}

.wrap{}

.tabs{height:40px;}

.tabs a{display:block;float:left;width:50%;color:#333;text-align:center;line-height:40px;font-size:16px;text-decoration:none;}

.tabs a.active{color:#FF0303;border-bottom: 2px solid #FF0303;}

.swiper-container{height:100% !important;width:100%;border-top:;}

.swiper-slide{height:100% !important;width:100%;background:none;}

.content-slide{padding:10px 0 10px 0;}

.content-slide p{text-indent:2em;line-height:1.9;}

.swiper-container {margin:0 auto;position:relative;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;/* Fix of Webkit flickering */    z-index:;}

.swiper-wrapper {position:relative;width:100% ;

    -webkit-transition-property:-webkit-transform, left, top;

    -webkit-transition-duration:0s;

    -webkit-transform:translate3d(0px,0,0);

    -webkit-transition-timing-function:ease;

    /*-moz-transition-property:-moz-transform, left, top;

    -moz-transition-duration:0s;

    -moz-transform:translate3d(0px,0,0);

    -moz-transition-timing-function:ease;

    -o-transition-property:-o-transform, left, top;

    -o-transition-duration:0s;

    -o-transform:translate3d(0px,0,0);

    -o-transition-timing-function:ease;

    -o-transform:translate(0px,0px);

    -ms-transition-property:-ms-transform, left, top;

    -ms-transition-duration:0s;

    -ms-transform:translate3d(0px,0,0);

    -ms-transition-timing-function:ease;*/

    transition-property:transform, left, top;

    transition-duration:0s;

    transform:translate3d(0px,0,0);

    transition-timing-function:ease;

    -webkit-box-sizing: content-box;

    -moz-box-sizing: content-box;

    box-sizing: content-box;

}

.swiper-free-mode > .swiper-wrapper {

    -webkit-transition-timing-function: ease-out;

    -moz-transition-timing-function: ease-out;

    -ms-transition-timing-function: ease-out;

    -o-transition-timing-function: ease-out;

    transition-timing-function: ease-out;

    margin: 0 auto;

}

.swiper-slide {

    float: left;

    -webkit-box-sizing: content-box;

    -moz-box-sizing: content-box;

    box-sizing: content-box;

}

/*******************************************************************************/

#menu{width:100%; overflow:hidden;}

#menu #nav {display:block;width:100%;padding:;margin:;list-style:none;}

#menu #nav li {float:left;width:50%;}

#menu #nav li a {font-size: 18px;display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center; color:#333;}

#menu_con{ width:100%; height:100%; border-top:none}

.tag{overflow:hidden;}

.selected{border-bottom: 1px solid #FF0303;color:#FF0303!important;}

.list{

    display: block;

    width:100%;

    height:50px;

    /*padding-top: 10px;*/

    border-bottom: 1px solid #ddd;

        font-size: 14px;

}

.list_msg{

    display: block;

    margin-top: 7px;

}

.list_img{

    width:35px;

    height:35px;

    float:left;

    position: relative;

    top: 3px;

}

.list_msg span{

    margin-left: 5px;

    display:block;

    float:left;

    color: #000;

}

好像就这些了。

手机端的tab切换，响应式切换效果的更多相关文章

PHP项目实现手机端和PC端的页面切换
目前访问页面的要切换成手机端和PC端,原理是通过对设备作出判断,显示不同的功能和页面. 如果手机端和PC端的功能结构不相同,一般会写两套系统,一套适用于PC端,一套适用于手机端. 如果功能相同,则只需 ...
手摸手带你理解Vue响应式原理
前言响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图.在面试中是经常考查的知识点,也是面试加分项. 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它 ...
css实现响应式九宫格效果
1. 首先看下九宫格的效果图: 2. html代码比较简单,如下: <div class="main"> <div class="box1"& ...
12款响应式 Lightbox（灯箱）效果插件
灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果.网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也 ...
响应式布局rem的使用
在如今移动端,响应式布局的时代,用rem作为单位已经是非常普及的一门小技巧了..rem的单位根据html的font-size来进行换算! 1.rem的兼容性: 如下图所示IE9以上就支持了rem这个属 ...
关于bootstrap和响应式布局
bootstrap导入首先需要安装好插件然后就是在代码器写导入代码代码如下 <html lang="zh-CN"> <head> <meta c ...
Java9第四篇-Reactive Stream API响应式编程
我计划在后续的一段时间内,写一系列关于java 9的文章,虽然java 9 不像Java 8或者Java 11那样的核心java版本,但是还是有很多的特性值得关注.期待您能关注我,我将把java 9 ...
《微信小程序七日谈》- 第二天：你可能要抛弃原来的响应式开发思维
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩上篇文 ...
用rem来做响应式开发
强烈推荐这篇文章:<web app 变革之rem> px转rem工具:<px转rem工具> 由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位 ...

随机推荐

gradle gradlew 的使用
jcenter() 仓库比 mavenCentral() 仓库快,因此最好将jcenter 放前面,这样下载速度最快. 使用本地软件仓库:repositories { flatDir { dirs ' ...
MyEclipse 代码自动提示
默认 myeclipse,输入.才会出现代码提示,不能根据单词前缀提示. 按以下设置就很爽了 .abcdefghijklmnopqrstuvwxyz(,
Rdlc报表出现空白页解决方法
在使用RDLC报表时,碰到这种情况:当只有一页数据时,报表确显示两页,第二页除了报表头之外数据为空.然后,当有多页数据时,最后一页为空. RDLC報表設計好後,在ReportViewer預覽報表時,頁 ...
IIS 7 WAS服务不可用
在 Windows Server 2008 上使用 %windir%\system32\inetsrv\appcmd.exe list wp 命令,得到如下错误: ERROR ( message:WA ...
乱侃c++
就在刚才我感觉c++真的好复杂,函数重载,多态,虚函数,虚函数表,模版,继承等一大坨东西好恶心,c++既然完全支持C语言,当然是把它的优缺点统统接下了,C语言中指针本身并不太难,是C语言的精华,当年刚 ...
Oracle中wm_concat()函数的使用
Oracle中wm_concat()函数的使用 wm_concat()函数是oracle行列转换函数,该函数可以把列值以‘,’分割开来,并显示成一行. 1.原数据: 2.把结果分组以‘|’分隔,以一行 ...
linux如何安装MyEclipse 2014
http://jingyan.baidu.com/article/0320e2c1cced031b87507b08.html
转载：页面加载swf插件:swfobject
转自:http://www.cnblogs.com/analyzer/articles/1299592.html 我一直都在用SWFObject 插入flash,好处多多,代码简洁,不会出现微软的“单 ...
Java中String对象的不可变性
首先看一个程序 package reverse; public class Reverse { public static void main(String[] args) { String c1=n ...
Android ndk下用AssetManager读取assets的资源
转自:http://www.cppblog.com/johndragon/archive/2012/12/28/196754.html 在使用 cocos2dx 在 Android 上进行游戏开发时, ...

手机端的tab切换，响应式切换效果

手机端的tab切换，响应式切换效果的更多相关文章

随机推荐

热门专题