html5学习之拖拽与拖放

以前实现元素的拖拽需要使用javascript大段代码实现，又是记录初始位置，又是记录位移等等很麻烦，现在HTML5提供了专门的拖拽与拖放的API，先说说相关API

事件 产生的源对象 说明
drag 被拖动的元素 这个事件在拖拽源触发。即在拖拽操作中触发dragstart事件的元素。
drop 拖放的目标元素 这个事件在拖拽操作结束释放时于释放元素上触发。一个监听器用来响应接收被拖拽的数据并插入到释放之地。这个事件只有在需要时才触发。当用户取消了拖拽操作时将不触发，例如按下了Escape（ESC）按键，或鼠标在非可释放目标上释放了按键。
dragstart 被拖动的元素 当一个元素开始被拖拽的时候触发。用户拖拽的元素需要附加dragstart事件。在这个事件中，监听器将设置与这次拖拽相关的信息，例如拖动的数据和图像。
dragenter 拖动过程中鼠标经过的元素 当拖拽中的鼠标第一次进入一个元素的时候触发。这个事件的监听器需要指明是否允许在这个区域释放鼠标。如果没有设置监听器，或者监听器没有进行操作，则默认不允许释放。当你想要通过类似高亮或插入标记等方式来告知用户此处可以释放，你将需要监听这个事件。
dragleave 拖动过程中鼠标经过的元素 当拖拽中的鼠标离开元素时触发。监听器需要将作为可释放反馈的高亮或插入标记去除。
dragend 拖动的对象元素 拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否。
dragover 拖动过程中鼠标经过的元素 当拖拽中的鼠标移动经过一个元素的时候触发。大多数时候，监听过程发生的操作与dragenter事件是一样的。
more >>

展开全文 >>

css3学习之column

CSS多列布局继承自块级布局模式，允许简单地定义多列文本。 一行太长的文字读起来很麻烦；当人眼从一行过长的文字末端移动到下一行开始处，就容易弄错到底该读哪一行。因此，为了最优化使用大的显示屏幕，设计者应该限制文字段落的宽度而并排排列，就像报纸一样。

糟糕的是如果不使用CSS和HTML在特定的位置强制换行，或者严格限制文本中允许的标记，或者夸张地使用脚本的话，这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。

兼容如下

兼容

more >>

展开全文 >>

css3学习之display:flex

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲，弹性盒改进了盒模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。

弹性盒布局的定义中，它可以自动调整子元素的高和宽，来很好的填充任何显示设备中的可用显示空间，收缩内容防止内容溢出。

不同于盒布局的基于垂直方向以及行内布局的基于水平方向，弹性盒布局的算法是方向无关的。 虽然盒布局在页面中工作良好，但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要进行协作而做出的努力。

兼容如下

兼容
more >>

展开全文 >>

css3学习之animation

animation运用的是一个Keyframes(关键帧)的概念来制作动画，这个概念和flash里面的关键帧一样，每一关键帧一个状态，然后很多关键帧拼成了一个动画。关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。也可包含额外可选的关键帧，描述动画开始和结束之间的状态。

语法规则如下：

animation-name

必须，定义了animation的动画名称

keyframes-selector

必须，定义阶段，0%或者from为开始，100%或者to为结束

css-styles

必须，每一关键帧的css样式

more >>

展开全文 >>

Swiper学习之旅（4）-API(3)

今天是最后一篇API的讲解，基本可以解决简单的使用。

touchRatio

触摸距离与slide滑动距离的比率。就是说，触碰的点离划过的距离为touchRatio*slider长度的时候，才可以切换到下一个slider。

slideToClickedSlide

设置为true则swiping时点击slide会过渡到这个slide。例如slide1向slide2 swipe的过程中轻点slide1会回到slide1，false则不接受此效果。

mySwiper.params

重要参数，获取Swiper对象初始化参数，或者重写该参数

1
2
3
4
5
6
var mySwiper = new Swiper('.swiper-container',{
   autoplay : 1000,
})
$('#btn1').click(function(){
   mySwiper.params.autoplay=200;
})

more >>

展开全文 >>

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

昨天讲解了部分API，今天继续讲一部分，估计接下来还有一篇。

grabCursor

设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）

scrollbar

Scrollbar容器的css选择器或HTML元素。scrollbar使用时需要需要配合html标签使用，在div中添加class标签

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

js中设置如下

1
scrollbar: '.swiper-scrollbar'

scrollbarHide

滚动条是否自动隐藏。默认：true，此时若是没有任何操作，滚动条会自动隐藏。
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