葡京网投哪个正规 > 新葡亰-前端 > h5开发相关内容总结,基于jquery的手风琴图片展示效果实现方法

原标题:h5开发相关内容总结,基于jquery的手风琴图片展示效果实现方法

浏览次数:142 时间:2019-11-15

移动端 h5开发相关内容总结(3)

2016/02/01 · HTML5 · 3 评论 · 移动端

本文作者: 伯乐在线 - zhiqiang21 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

之前写过两篇开发中遇到的问题和解决方案。当时是 CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很多内容都是有内在联系的,所以不好分开。

给大家分享一下这半年来的感受吧:

知道和理解之间是有很大距离的。别人谈到一个知识点,能接上嘴并且能发表一下自己的意见,这叫知道。遇到问题能够想到用什么知识点解决问题,这叫理解。

所以有很多知识点自己确实在书上都看到过但是在平时遇到问题的时候却不知道怎么去用或者说想到去用,有时候会有同事给一下指导说用什么解决问题。关键时候还是多看(看书,看别人的代码)和多用。

在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,

flexbox简介,flexbox

基于jquery的手风琴图片展示效果实现方法,jquery手风琴

本文实例讲述了基于jquery的手风琴图片展示效果实现方法。分享给大家供大家参考。具体实现方法如下:

代码运行效果如下图所示:

葡京正网网投 1

index.html页面代码如下:

复制代码 代码如下:

<!DOCTYPE html>
<html class=''>
<head>
    <title>一款基于jquery的手风琴图片展示效果demo</title>
    <style class="cp-pen-styles">
        div
        {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
       
        html, body, .page-container
        {
            height: 100%;
            overflow: hidden;
        }
       
        .page-container
        {
            -webkit-transition: padding 0.2s ease-in;
            transition: padding 0.2s ease-in;
            padding: 80px;
        }
        .page-container.opened
        {
            padding: 0;
        }
        .page-container.opened .flex-container .country:not(.active)
        {
            opacity: 0;
            -webkit-flex: 0;
            -ms-flex: 0;
            flex: 0;
        }
        .page-container.opened .flex-container .country:not(.active) div
        {
            opacity: 0;
        }
        .page-container.opened .flex-container .active:after
        {
            -webkit-filter: grayscale(0%) !important;
            filter: grayscale(0%) !important;
        }
       
        .flex-container
        {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            height: 100%;
        }
        @media all and (max-width: 900px)
        {
            .flex-container
            {
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
            }
        }
       
        .country
        {
            position: relative;
            -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            -webkit-transition: 0.5s ease-in-out;
            transition: 0.5s ease-in-out;
            cursor: pointer;
            font-family: "Bree Serif" , serif;
            text-align: center;
            color: #fff;
            font-size: 22px;
            text-shadow: 0 0 3px #000;
        }
        .country div
        {
            position: absolute;
            width: 100%;
            z-index: 10;
            top: 50%;
            text-align: center;
            -webkit-transition: 0.1s;
            transition: 0.1s;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            -webkit-filter: none;
            filter: none;
        }
        .country:after
        {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            -webkit-transition: 0.5s ease-in-out;
            transition: 0.5s ease-in-out;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
        .country:hover
        {
            -webkit-flex-grow: 6;
            -ms-flex-positive: 6;
            flex-grow: 6;
        }
        .country:hover:after
        {
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
        }
        @media all and (max-width: 900px)
        {
            .country
            {
                height: auto;
            }
        }
       
        .netherlands:after
        {
            background-image: url("Netherlands.png");
            background-position: center;
        }
       
        .belgium:after
        {
            background-image: url("belgium-307_3.jpg");
            background-position: center;
        }
       
        .france:after
        {
            background-image: url("30.jpg");
            background-position: center;
        }
       
        .germany:after
        {
            background-image: url("vacation.jpg");
            background-position: center;
        }
       
        .england:after
        {
            background-image: url("england.jpg");
            background-position: center;
        }
    </style>
</head>
<body>
    <div class="page-container">
        <div class="flex-container">
            <div class="country netherlands">
                <div>
                    Netherlands</div>
            </div>
            <div class="country belgium">
                <div>
                    Belgium</div>
            </div>
            <div class="country france">
                <div>
                    France</div>
            </div>
            <div class="country germany">
                <div>
                    Germany</div>
            </div>
            <div class="country england">
                <div>
                    England</div>
            </div>
        </div>
    </div>
    <script src='jquery.js'></script>
    <script>
        $('.country').click(function () {
            $(this).toggleClass('active');
            $('.page-container').toggleClass('opened');
        }); //@ sourceURL=pen.js
    </script>
</body>
</html>

完整实例代码点击此处本站下载。

希望本文所述对大家的jQuery特效设计有所帮助。

本文实例讲述了基于jquery的手风琴图片展示效果实现方法。分享给大家供大家参考。...

1.display:none; 和 visibility:hidden;的区别

display:none 关闭一个元素的显示(对布局没有影响);其所有后代元素都也被会被关闭显示。文档渲染时,该元素如同不存在。(不会显示在文档流中的位置,但是 DOM 节点仍会出现在文档流中)
visibility:hidden visibility属性让你能够控制一个图形元素的可见性,但是仍会占用显示时候在文档流中的位置。

使用 display:none 的时候虽然元素不会显示,但是DOM 节点仍会出现,所以我们就可以使用选择器对该元素进行操作。如下图中的示例:

葡京正网网投 2

如下

一、概述

浮动在移动布局中不再重要,flex盒模型越来越重要。

flexbox经历过三个版本,主要区别是2009年到2012年之间的语法变化。

最新的语法和现在规范是同步的(例display:flex和“flex-{*}”属性)。
在这之间的语法是2011年出现的非官方语法,只能被IE识别(例display:flexbox;display: -ms-flexbox)。
最老的语法产生于2009年(例display: box;或者“box-{*}”属性)

flexbox是css3新增盒子模型,可以实现复杂的布局。flexbox没有得到firefox,Opera,chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz),opera(-o),chrome/safari(-webkit)。

flexbox经典的布局应用是垂直等高,水平均分,按比例划分。

2.事件冒泡引发的问题

这个问题是发生在自己上篇文章《h5端呼起摄像头扫描二维码并解析》中的。详细的代码可以看那篇文章。

/* OLD - iOS 6-, Safari 3.1-6 */

二、flexbox常用属性

问题发生的场景

先看一段html 代码:

XHTML

<div class="qr-btn" node-type="qr-btn">扫描二维码1 <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" /> </div>

1
2
3
<div class="qr-btn" node-type="qr-btn">扫描二维码1
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
</div>

之前我的想法是这个样子的:
1.我先触发qr-btn的 click 事件,在回调中触发 input 的click 事件click 事件
2.然后触发input 的 change 事件,获取上传图片的信息。

按照我的思路代码应该是下面的这个样子的

JavaScript

//点击父级元素的事件 $('.qr-btn').bind('click',function(){ //触发子元素的事件 $('[node-type=jsbridge]').trigger("click"); }); $('[node-type=jsbridge]').bind('change',function(){ //做一些事情 });

1
2
3
4
5
6
7
8
//点击父级元素的事件
    $('.qr-btn').bind('click',function(){
        //触发子元素的事件
        $('[node-type=jsbridge]').trigger("click");
    });
    $('[node-type=jsbridge]').bind('change',function(){
        //做一些事情
    });

上面的代码,按照正常的思路应该是没有问题的,但是,在实际的运行过程中却发生了问题。浏览器的报错信息如下:

葡京正网网投 3
这是因为堆栈溢出的问题。那么为什么会出现这样的问题呢?我把断点打在了以下的位置,然后点击子元素

葡京正网网投 4

发生的情况是:代码无限次的触发$('.qr-btn').bind(...) ,就出现了上面的报错信息。那么是什么原因导致的呢?
思考一下发现:是因为事件冒泡的问题。我单击父元素触发子元素的click 事件,子元素的 click 事件又冒泡到父元素上,触发父元素的 click 事件,然后父元素再次触发了子元素的 click 事件,这就造成了事件的循环

display: -webkit-box;     

1、用于父元素的样式

  • display:block;该属性会将此元素及其直系子代加入弹性框模型中。(flexbox模型只适用于直系子代)
  • box-orient:horizontal|vertical|inline-axis|block-axis|inherit;该属性定义父元素中的子元素是如何排列的。horizontal对父元素的宽度分配划分。
  • box-pack:start|end|center|justify;box-pack表示父容器里面子容器的水平对齐方式

葡京正网网投 5

  • box-align:start|end|center|baseline|stretch;表示父容器里面子容器的垂直对齐方式。

葡京正网网投 6

问题解决办法:

尝试阻止事件的冒泡,看能够解决问题?
那我们尝试在触发子元素的click的时候,尝试组织子元素的冒泡,看能否解决我的问题?添加如下的代码:

JavaScript

$('[node-type=jsbridge]').bind('click',function(e){ // console.log(e.type); e.stopPropagation(); });

1
2
3
4
$('[node-type=jsbridge]').bind('click',function(e){
      // console.log(e.type);
       e.stopPropagation();
});

经过我的测试,代码是能够正常的运行的。

那么我们有没有更好的方法来解决上面的问题呢?请看接下来的内容

/* OLD - Firefox 19- (buggy but mostly works) */

2、用于子元素的样式

  • box-flex:0|任意数字;该属性让子容器针对父容器的宽度按一定规则进行划分。 

3.lable标签的 for 属性

先来看 lable 标签的定义:

标签为`input`元素定义标注(标记)。 `label`元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。 标签的for属性应当与相关元素的 id 属性相同。

看想一下 w3school 的示例代码和效果:

XHTML

<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>

1
2
3
4
5
<form>  <label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />  <label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

效果如下图:

葡京正网网投 7

到这里应该之道我们该怎么改进我们的代码了,

XHTML

<lable class="qr-btn" node-type="qr-btn" for="qr-input">扫描二维码1 <input node-type="jsbridge" id="qr-input" type="file" name="myPhoto" value="扫描二维码1" /> </lable>

1
2
3
<lable class="qr-btn" node-type="qr-btn" for="qr-input">扫描二维码1
        <input node-type="jsbridge" id="qr-input" type="file" name="myPhoto" value="扫描二维码1" />
</lable>

除了 lable 标签的样式我们自己需要自己定义外,还有两个优点:

  • 葡京正网网投,减少了 JavaScript 的书写;
  • lable 标签和 input 标签没有必要是包含关系

display: -moz-box;       

三、快速入门demo

4.“弹层盒”布局和普通盒模型布局的优缺点对比

最近做了一个抽奖的活动,其中就有一个轮盘的旋转的动画效果(注意啦,中间的那个卡顿是 gif 图片又重新开始播放了)。,效果如下图:

葡京正网网投 8

关于动画实现在下一篇文章中会继续介绍,这里主要来关注下布局的问题。因为我们页面会在 pc 和移动移动各出一套。所以在 pc 和移动我分别用了两种方案,pc 传统布局实现,h5 “弹性盒”实现。

/* TWEENER - IE 10 */

1、子元素水平排列,按比例分割父元素宽度

.parent宽度500px,其子元素水平排列,child-one占1/6,child-two占2/6,child-three占了3/6。

<style>
        .parent{
            width: 500px;
            height: 200px;
            display: -webkit-box;
            -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的,但是为了区分起见,加上该属性 */
        }
        .child-one{
            background: lightblue;
            -webkit-box-flex: 1;
        }
        .child-two{
            background: lightgray;
            -webkit-box-flex: 2;
        }
        .child-three{
            background: lightgreen;
            -webkit-box-flex: 3;
        }
    </style>
</head>
<div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中-->
    <div class="parent">
        <div class="child-one">1</div>
        <div class="child-two">2</div>
        <div class="child-three">3</div>
    </div>
</div>

葡京正网网投 9

1.弹性盒实现九宫格

外围的那些灯是使用绝对定位来做的,就不过过多的介绍,主要的是看中间的奖品九宫格的部分。html 代码如下:

XHTML

<div class="re-middle"> <div class="row-a" node-type="row-a"> <div>mac pro</div> <div>扫地机器人</div> <div>iphone6s</div> </div> <div class="row-b" node-type="row-b"> <div>20积分</div> <div></div> <div>优惠券</div> </div> <div class="row-c" node-type="row-c"> <div>ps4</div> <div> <p>猴年限定</p>公仔</div> <div>祝福红包</div> </div> <div node-type="reward-layer"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="re-middle">
    <div class="row-a" node-type="row-a">
        <div>mac pro</div>
        <div>扫地机器人</div>
        <div>iphone6s</div>
    </div>
    <div class="row-b" node-type="row-b">
        <div>20积分</div>
        <div></div>
        <div>优惠券</div>
    </div>
    <div class="row-c" node-type="row-c">
        <div>ps4</div>
        <div>
            <p>猴年限定</p>公仔</div>
        <div>祝福红包</div>
    </div>
    <div node-type="reward-layer"></div>
</div>

css代码如下:

CSS

.re-middle { position: absolute; width: 28.3rem; height: 16rem; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #f69f75; color: #ffdece; font-size: 1.8rem; } .row-a, .row-b, .row-c { height: 5.3rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .row-a div, .row-b div, .row-c div { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; line-height: 5.3rem; background-color: #f69f75; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.re-middle {
    position: absolute;
    width: 28.3rem;
    height: 16rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #f69f75;
    color: #ffdece;
    font-size: 1.8rem;
}
.row-a,
.row-b,
.row-c {
    height: 5.3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    line-height: 5.3rem;
    background-color: #f69f75;
}

由上面的 css 代码可以看出来我仅仅是在水平方向上使用了“弹性盒”,而在竖直的方向上,还是使用了固定高度(因为我是用的 rem 单位,这里的固定也是不准确的,高度会根据 fontsize 值进行计算。)

那么可不可以在竖直和水平都是用“弹性盒”呢?
来看一下下面的css代码:

CSS

.re-middle { position: absolute; width: 28.3rem; height: 16rem; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #f69f75; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; color: #ffdece; font-size: 1.8rem; } .row-a, .row-b, .row-c { /*height: 5.3rem;*/ -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .row-a div, .row-b div, .row-c div { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; line-height: 5.3rem; background-color: #葡京网投哪个正规,f69f75; /*position: relative;*/ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.re-middle {
    position: absolute;
    width: 28.3rem;
    height: 16rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #f69f75;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #ffdece;
    font-size: 1.8rem;
}
.row-a,
.row-b,
.row-c {
    /*height: 5.3rem;*/
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    line-height: 5.3rem;
    background-color: #f69f75;
    /*position: relative;*/
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
}

周末的时候关于这个布局自己又翻书看了下“弹性盒”的文档,终于实现了在竖直和垂直方向上都实现内容的水平垂直居中内部元素。其实上面的代码只需要把内容的父级元素再次定义为display:flex再添加两个属性justify-contentalign-items就可以了。前者是控制弹性盒的内容垂直方向居中,后者控制内容水平方向居中。

详细代码如下:

CSS

.row-a div, .row-b div, .row-c div { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border: 1px solid #000; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid #000;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

display: -ms-flexbox;     

2、子元素水平排列,一个子元素定宽,剩余子元素按比例分割

葡京正网网投 10<style> .parent{ width: 500px; height: 200px; display: -webkit-box; background-color:pink; -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的,但是为了区分起见,加上该属性 */ } .child-one{ background: lightblue; -webkit-box-flex: 1; } .child-two{ background: lightgray; -webkit-box-flex: 2; } .child-three{ background: lightgreen; /*定宽,并加上左右margin,父元素加上粉色背景色更好理解*/ width:150px; margin:0 15px; } </style> </head> <div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中--> <div class="parent"> <div class="child-one">1</div> <div class="child-two">2</div> <div class="child-three">3</div> </div> </div> View Code

葡京正网网投 11

2.传统方式实现

与 h5 端相比,我在 pc 端的实现是传统的浮动方式.我的 HTML 代码如下:

XHTML

<div class="re-middle"> <div class="row-a"> <div>mac pro</div> <div class="row-a-sec">祝福红包</div> <div class="row-a-last"> iphone 6s</div> </div> <div class="row-b clearfix"> <div>优惠券</div> <div class="row-b-sec"></div> <div class="row-b-last">20积分</div> </div> <div class="row-c"> <div>扫地机器人</div> <div class="row-c-sec">猴年限定 <p>公仔</p> </div> <div class="row-c-last">ps4</div> </div> <div class="reward-btn"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="re-middle">
    <div class="row-a">
        <div>mac pro</div>
        <div class="row-a-sec">祝福红包</div>
        <div class="row-a-last"> iphone 6s</div>
    </div>
    <div class="row-b clearfix">
        <div>优惠券</div>
        <div class="row-b-sec"></div>
        <div class="row-b-last">20积分</div>
    </div>
    <div class="row-c">
        <div>扫地机器人</div>
        <div class="row-c-sec">猴年限定
            <p>公仔</p>
        </div>
        <div class="row-c-last">ps4</div>
    </div>
    <div class="reward-btn"></div>
</div>

css 代码如下:

CSS

.re-middle { background-color: #f89f71; width: 530px; height: 320px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .row-a, .row-b, .row-c { /*height: 106px;*/ font-size: 0; overflow: hidden; } .row-a > div, .row-c > div { float: left; width: 176px; height: 106px; text-align: center; } .row-b div { float: left; width: 176px; height: 106px; text-align: center; line-height: 106px; background-color: #f69f75; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.re-middle {
    background-color: #f89f71;
    width: 530px;
    height: 320px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.row-a,
.row-b,
.row-c {
    /*height: 106px;*/
    font-size: 0;
    overflow: hidden;
}
.row-a > div,
.row-c > div {
    float: left;
    width: 176px;
    height: 106px;
    text-align: center;
}
.row-b div {
    float: left;
    width: 176px;
    height: 106px;
    text-align: center;
    line-height: 106px;
    background-color: #f69f75;
}

由上面的 css 代码对比看我们可以显然看出传统的浮动方式的布局和“弹性盒”布局的一些优缺点:

  • float布局代码简洁,但是必须确定的指定盒子的宽度和高度,多屏幕的适配上会差一些(rem动态计算除外)。
  • “弹性盒”布局代码使用新的 css3属性,需要添加额外的厂商前缀,增加了代码的复杂度(添加厂商前缀可以使用 sublime 插件,一键完成,推荐我的文章 前端开发工程师的 sublime 配置)
  • “弹性盒”为多屏幕的适配提供了便利性。我不用去关心子元素的宽度和高度是多少,或者是屏幕的宽度是多少,都会根据实际请款flex自身会去适配。

遇到的一个小问题,多行文本的处置居中:
这个九宫格内的文本元素,如果只是单行的话,只要使用 line-height 就可以解决问题,但是如果多行呢?会出什么情况呢,看下图:
葡京正网网投 12

所以这里只能考虑不使用line-height,使用padding 来解决问题 ,尝试padding后的效果。如下图:
葡京正网网投 13

可以看到容器的下面多出了一部分。那也是我们使用的padding的问题,那么怎么解决这个问题呢?这就要用到之前提到过的box-sizing来解决问题。

CSS

.row-c-sec { color: #ffdece; font-size: 30px; padding-top: 17px; background-color: #f69f75; /*使容器的高=内容高度+padding +border*/ box-sizing: border-box; }

1
2
3
4
5
6
7
8
.row-c-sec {
    color: #ffdece;
    font-size: 30px;
    padding-top: 17px;
    background-color: #f69f75;
    /*使容器的高=内容高度+padding +border*/
    box-sizing: border-box;
}

/* NEW - Chrome */

3、子元素垂直排列,分割父元素高度

.parent中的子元素垂直排列,所以每个子元素宽度占100%。

葡京正网网投 14<style> .parent{ width: 400px; height: 600px; display: -webkit-box; background-color:pink; -webkit-box-orient: vertical;/*子元素垂直排列 */ } .child-one{ background: lightblue; -webkit-box-flex: 1; } .child-two{ background: lightgray; -webkit-box-flex: 2; } .child-three{ background: lightgreen; /*定高,有上下margin,父元素加上粉色背景色更好理解*/ height:200px; margin:15px 0; } </style> </head> <div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中--> <div class="parent"> <div class="child-one">1</div> <div class="child-two">2</div> <div class="child-three">3</div> </div> </div> View Code

葡京正网网投 15

5.按钮多次提交的解决方案

在做“跑马灯”插件的时候遇到了一个问题,就是用户点击开始抽奖按钮以后在还没有返回结果的时候用户又第二次点击抽奖按钮,那个时候机会出现“奇葩”的问题。比如说:第一次请求和第二次请求重合返回的结果显示哪一个,就算允许用户进行二次抽奖,交互也不友好。而且如果前端页面不做限制的话,显示也会出现奇葩的问题。比如下面这样:

葡京正网网投 16

这样是不是很糟糕啊。。。

那么我是怎么解决这个问题呢?
答案很简单,我就是在点击按钮之后,使用绝对定位弹起了一个透明的弹层,将按钮给覆盖,等结果返回并显示以后,我在同时去掉弹层。这样就避免了用户的重复提交。详细看一下代码:

XHTML

<div node-type="cover_layer"></div>

1
<div node-type="cover_layer"></div>

CSS

cover-layer{ width:100%; height:100%; top:0; position:absolute; z-index:9999; }

1
2
3
4
5
6
7
cover-layer{
    width:100%;
    height:100%;
    top:0;
    position:absolute;
    z-index:9999;
}

这里保证我的这个透明的弹层能够覆盖在抽奖按钮的上面。当然这个class 是我通过JavaScript动态的添加和删除的。

JavaScript

$(node).on('clcik','.reward-btn',function(){ //呼起弹层 $('[node-type=cover_layer]',node).addClass('cover-layer'); ..... //返回结果以后去掉弹层 $('[node-type=cover_layer]',node).removeClass('cover-layer'); ..... });

1
2
3
4
5
6
7
8
$(node).on('clcik','.reward-btn',function(){
    //呼起弹层
    $('[node-type=cover_layer]',node).addClass('cover-layer');
    .....
    //返回结果以后去掉弹层
    $('[node-type=cover_layer]',node).removeClass('cover-layer');
    .....
});

这次的分享就到这里,下一次会分享“轮盘”抽奖效果的 JavaScript 开发过程。

打赏支持我写出更多好文章,谢谢!

打赏作者

display: -webkit-flex;  

4、子元素水平排列,定高垂直方向居中对齐

父元素中子元素水平排列,子元素定高时设置垂直方向对齐方式为居中对齐。

葡京正网网投 17<style> .parent{ width: 400px; height: 200px; display: -webkit-box; background-color:pink; -webkit-box-orient: horizontal; /*-webkit-box-align:center;/*父元素中子元素水平排列,定高时设置垂直方向对齐方式为垂直居中*/ } .child-one{ background: lightblue; -webkit-box-flex: 1; height:100px; } .child-two{ background: lightgray; -webkit-box-flex: 2; height:110px; } .child-three{ background: lightgreen; -webkit-box-flex: 2; height:120px; } </style> </head> <div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中--> <div class="parent"> <div class="child-one">1</div> <div class="child-two">2</div> <div class="child-three">3</div> </div> </div> View Code

葡京正网网投 18

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

葡京正网网投 19 葡京正网网投 20

2 赞 16 收藏 3 评论

display: flex;

四、经典布局

flexbox经典的布局应用是垂直等高,水平均分,按比例划分,水平垂直居中,还可以实现移动端的弹窗。

关于作者:zhiqiang21

葡京正网网投 21

做认为对的事情,如果可能是错的,那就做认为自己承受得起的事情! 个人主页 · 我的文章 · 11 ·      

葡京正网网投 22

使用flex:1;时也要添加如下兼容性写法:-webkit-box-flex: 1;     

1、垂直等高,水平均分,按比例划分

.parent{display: -webkit-box; display: -webkit-flex; display: flex;}
.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}

完整demo

葡京正网网投 23<style> .parent{display: -webkit-box; display: -webkit-flex; display: flex; height:100px; width:150px; background-color:pink;} .child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border:1px solid green; } </style> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> View Code

葡京正网网投 24

 /* OLD - iOS 6-, Safari 3.1-6 */           

2、水平居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}

完整demo:

葡京正网网投 25<style> .parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; height:100px; width:150px; background-color:pink;} .child{ width:50px; height:50px; border:1px solid green; } </style> <div class="parent"> <div class="child"></div> </div> View Code

葡京正网网投 26

 -moz-box-flex: 1;        

3、垂直居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}

完整demo

葡京正网网投 27<style> .parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; height:100px; width:150px; background-color:pink;} .child{ width:50px; height:50px; border:1px solid green; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> View Code

葡京正网网投 28

 /* OLD - Firefox 19- */           

4、移动端弹窗 

 现在移动端很多弹窗组件使用flexbox来实现,直接嵌套div.overlay>div.pop。

葡京正网网投 29<style> .overlay{ /*flex style*/ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:center; -webkit-box-align:center; display:-moz-box; -moz-box-orient:horizontal; -moz-box-pack:center; -moz-box-align:center; display:-o-box; -o-box-orient:horizontal; -o-box-pack:center; -o-box-align:center; display:-ms-box; -ms-box-orient:horizontal; -ms-box-pack:center; -ms-box-align:center; display:box; box-orient:horizontal; box-pack:center; box-align:center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; display: flex; align-items: center; justify-content: center; /*other style*/ width:100%; max-width:750px; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.5); } .popup{ width:90%; max-width:650px; border:1px solid green; padding:20px 4% 4% 4%; box-sizing:border-box; height:auto; background:#fff; border-radius:4px; position:relative; } .popup-close{ width:15px; height:14px; background:url(image/close.png) no-repeat; background-size:100% 100%; position:absolute; top:8px; right:8px; } </style> 主页面的文字 <div class="overlay"> <div class="popup"> <a href="javascript:;" class="popup-close"></a> 弹层的文字 </div> </div> View Code

葡京正网网投 30

 width: 20%;             

五、兼容性

葡京正网网投 31

 

PC端:

  • 无前缀:Chrome 29+, Firefox 28+, IE 11+, Opera 17+
  • 需要前缀:Chrome 21+, Safari 6.1+, Opera 15+需要前缀-webkit-

提示:旧版本的Firefox(22-27)支持除了flex-wrapflex-flow之外的新语法。Opera (12.1+ - 17+)使用flex可以没有私有前缀,但是中间的15和16版本需要私有前缀。

移动端:

  • 无前缀:Android 4.4+, Opera mobile 12.1+, BlackBerry 10+, Chrome for Android 39+, Firefox for Android 33+, IE 11+ mobile
  • 需要前缀:iOS 7.1+需要前缀-webkit-

 /* For old syntax, otherwise collapses. */            

六、资源链接

display:-webkit-box

A Complete Guide to Flexbox

探索Flexbox

时下Web App中的Flexbox应用

 

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:

 

一、概述 浮动在移动布局中不再重要,flex盒模型越来越重要。 flexbox经历过三个版本,主要区别是2009年到2012年之间的语...

-webkit-flex: 1;         

 /* Chrome */            

-ms-flex: 1;             

 /* IE 10 */           

 flex: 1;                  

/* NEW, Spec - Opera 12.1, Firefox 20+ */

但是,一定要注意:如果作用于flex:1的元素为input或button时,只用flex:1;是不起作用的,还要加上display:block;才能起作用。以下为小案例复制代码

<style>

html,body{

padding: 0;

margin: 0;

}

.demo1{

background-color: yellow;

text-align: center;

height: 80px;

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

/* for uc */

display: -webkit-box;

-webkit-box-align: center;

}

.demo1>div{

background-color: green;

margin: 2px;

-webkit-flex: 1;

flex: 1;

/* for uc */

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

}

.demo2{

background-color: yellow;

width: 80px;

height: 200px;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

-webkit-align-items: center;

align-items: center;

/* for uc */

display: -webkit-box;

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

box-orient: vertical;

-webkit-box-align: center;

}

.demo2>div{

background-color: green;

width: 40px;

margin: 2px;

-webkit-flex: 1;

flex: 1;

/* for uc */

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

}

.demo3{

text-align: center;

padding: 0 6px;

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */

display: -moz-box;        /* OLD - Firefox 19- (buggy but mostly works) */

display: -ms-flexbox;      /* TWEENER - IE 10 */

display: -webkit-flex;    /* NEW - Chrome */

display: flex;

}

.demo3 .btn{

-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */

-moz-box-flex: 1;        /* OLD - Firefox 19- */

width: 20%;              /* For old syntax, otherwise collapses. */

-webkit-flex: 1;          /* Chrome */

-ms-flex: 1;              /* IE 10 */

flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

display:block;

height: 40px;

color:#fff;

text-align: center;

line-height: 40px;

cursor: pointer;

font-size: 17px;

font-weight: 700;

margin-top:0px;

margin-bottom:20px;

font-family: "方正正中黑简体", "Microsoft YaHei", "sans-serif";

-webkit-appearance : none ;  /*解决iphone safari上的圆角问题*/

}

.prev {

background-color: #FEBC21;

margin-right:6px;

}

.next {

background-color: #FE9121;

}

</style>

<h2>左右排列,上下居中</h2>

<div class="demo1">

<div>flex</div>

<div>flex</div>

<div>flex</div>

</div>

<h2>上下排列,左右居中</h2>

<div class="demo2">

<div>flex</div>

<div>flex</div>

<div>flex</div>

</div>

<h2>左右排列,元素为input或button</h2>

<div class="demo3">

<button class="btn prev">button</button>

<input type="button" class="btn next" id="btn" value="input">

</div>

在position:fixed的这些情况下,需要使用冒泡的方式才能触发绑定的事件

本文由葡京网投哪个正规发布于新葡亰-前端,转载请注明出处:h5开发相关内容总结,基于jquery的手风琴图片展示效果实现方法

关键词:

上一篇:HTML5标签使用的常见误区,避免常见的六种HTML5错误用法

下一篇:HTML5的10个关键区别