手机端的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的单位 ...

随机推荐

HD1004Let the Balloon Rise
Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
Skeletal Animation
[Skeletal Animation] Skeletal animation is the use of “bones” to animate a model. The movement of bo ...
app之间的互相跳转
第一次写博客,给大家带来的是:iOS开发中不同app之间的跳转,相信很多人也有用过友盟的SDK或者其他的第三方的分享工具,原理都是一样的. 跳转的实现分为四步: 第一步:建立两个工程,模仿两个App的 ...
Labview中定时函数之间的区别
第一个定时函数(时间延迟):在VI中插入时间延迟,指定在运行调用VI之前延时的秒数.默认值为1.000. 第一个定时函数(等待(ms)):等待指定长度的毫秒数,并返回毫秒计时器的值.该函数进行异步系统 ...
keil编译时出现*** WARNING L2: REFERENCE MADE TO UNRESOLVED EXTERNAL
*** WARNING L2: REFERENCE MADE TO UNRESOLVED EXTERNAL *** WARNING L1: UNRESOLVED EXTERNAL SYMBOL 解决： ...
poj 2239 Selecting Courses(二分匹配简单模板)
http://poj.org/problem?id=2239 这里要处理的是构图问题p (1 <= p <= 7), q (1 <= q <= 12)分别表示第i门课在一周的第 ...
自己制作 SPx N合1 自动安装盘(x86)
来处"xinso" 一.制作方法: 以技嘉和惠普为例作,其它的可以如法泡制及变通: 1.复制一份最常用的 OEM XP,例如技嘉,到D:\1TO2 2.在 D:\ 创造一个 HP ...
java 对excel操作读取、写入、修改数据；导出数据库数据到excel
============前提加入jar包jxl.jar========================= // 从数据库导出数据到excel public List<Xskh> outPu ...
创建维护计划时，提示“代理XP”组件已作为此服务器安全配置的一部分被关闭
一.问题在Management Studio中新建维护计划时,提示以下错误信息:“代理XP”组件已作为此服务器安全配置的一部分被关闭.系统管理员可以使用sp_configure来启用“代理XP”.有关 ...
[转]Kerberos简介
Kerberos协议: Kerberos协议主要用于计算机网络的身份鉴别(Authentication), 其特点是用户只需输入一次身份验证信息就可以凭借此验证获得的票据(ticket-grantin ...

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

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

随机推荐

热门专题