Swiper学习之旅（2）-API(1)

上篇文章讲了一些swiper的基本用法，今天来介绍一下常用的一些API

direction

slide滑动方向，可设置horizontal(水平)或vertical(垂直),默认是水平

pagination

分页器容器的css选择器或HTML标签，这里需要配合html标签使用，在div中添加class标签：

1
<div class="swiper-pagination"></div>

js中进行相应设置

1
pagination: '.swiper-pagination'

这样就可以出现分页的按钮
more >>

展开全文 >>

Swiper学习之旅（1）

引入文件

先去Swiper官网下载Swiper相关js和css文件，当然可以用cdn引入

1
2
<link rel="stylesheet" href="css/swiper.css"/>
<script type="text/javascript" src="js/swiper.min.js"></script>

html部分

先用3个div做实例

1
2
3
4
5
6
7
8
9
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

js部分

首先初始化，然后用相关API进行设置

1
2
3
4
5
6
7
8
window.onload = function () {
    //initialize swiper when document ready
    var mySwiper = new Swiper ('.swiper-container', {
        // Optional parameters
        direction: 'vertical',
        loop: false,
    })
};

more >>

展开全文 >>

使用CSS3美化复选框checkbox

我们知道HTML默认的复选框样式十分简陋，而以图片代替复选框的美化方式会给页面表单的处理带来麻烦，那么本文将结合实例来了解一下使用CSS3将复选框checkbox进行样式美化，并且带上超酷的滑动效果。一般我们处理input都会用label的for属性与input的ID关联，这样的话，用户点击label的时候，实际上就相当于点击了那个input，通过label和checkbox，我们可以将checkbox隐藏，而将label制作为各种漂亮超酷的复选框样式。我们可以使用:before和:after伪元素来制作各种效果，如滑动按钮的效果。这些效果都可以通过相邻兄弟选择器来选择与checkbox相邻的label来实现，结果如下

more >>

展开全文 >>

Javascript事件模型：捕获和冒泡

在js的事件模型中，存在着两种不一样的处理方式，一总是捕获，一种是冒泡。早期的两种主流的浏览器Netscape和IE有不同的解决方案，IE采用的是事件冒泡的方法，而Netscape则是采用事件捕获的处理方法，区别如下图：

然后我们再来看看w3c中，对不同Event的定义规范:

more >>

展开全文 >>

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

on learning