2016年03月_季诗筱

原创 react.js学习（1） webpack

师父要我基于ES6开发，但是目前的浏览器暂不完全支持所有新语法特性，所以我需要将ES6编译为ES5。这里选择的是webpack1、安装webpack npm install webpack -g npm install webpack --sava-dev2、安装react、babelnpm install --sava react react-domnpm install babel-loa

2016-03-25 11:17:14 2005 7

原创浅谈 -webkit-tap-highlight-color 属性

这两天在做一个运营活动，是公司4周年的活动，要做一个拼蛋糕送祝福的H5页面。做完之后，发现有一个bug，就是，我在手机上（iphone5s）点击按钮的时候，屏幕总会闪动一下，这让页面看起来很不友好也不流畅。网上搜了一下，加了一句css就解决了：-webkit-tap-highlight-color:rgba(0,0,0,0) //webkit是苹果浏览器引擎，tap点击，highlight背景高亮

2016-03-14 14:46:12 17302 1

原创 Swiper.js 实现移动端元素左右滑动

swiper.js也是一个很好用的移动端的js库，需要引入它的css文件和js文件。用法很简单，加入相应的类即可，看一下Demo，很容易看懂。我的例子如下：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewpor

2016-03-09 17:53:46 15473 4

原创 Hammer.js 实现移动端元素的拖拽库

Hammer.js是一个可以实现移动端元素拖拽的库。其功能还是比较全的，主要针对触屏的6大事件进行监听：【引用内容转自李林峰的园子】 1、 Pan事件：在指定的dom区域内，一个手指放下并移动事件，即触屏中的拖动事件。这个事件在屏触开发中比较常用，如：左拖动、右拖动等，如手要上使用QQ时向右滑动出现功能菜单的效果。该事件还可以分别对以下事件进行监听并处理： Panstart：拖

2016-03-09 17:45:01 13862 1

原创 Drag，js实现鼠标拖拽元素

今天有个需求，就是实现移动端元素的拖拽功能，自己用原生代码写了一个在PC端通过鼠标进行拖拽的例子，代码如下：<!DOCTYPE html><html><head> <title>实现拖拽功能</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css">

2016-03-09 17:29:36 4221 4

原创 CSS 的继承、层叠和特殊性[修改版]

今天在看《HTML5与CSS3权威指南》，编写代码来验证background-origin，却出现了一个问题。我的代码如下：<!DOCTYPE html><html><head> <title>background的新增属性</title> <meta charset="utf-8" /> <style type="text/css"> #box{

2016-03-09 14:46:02 1034 1

原创 CSS3animation动画 + 动画如何切换

之前做转盘的时候，用的就是animation，然后加@keyframes。当时时间挺紧张的，就在网上搜了下怎么用，就直接用了。现在有时间了，好好看了一下具体的用法。 —《图解CSS3》 CSS3的animation属性可以像Flash制作动画一样，通过关键帧控制动画的每一步，实现复杂的动画效果。属性： animation-name:指定@keyframes关键帧的名字

2016-03-06 15:37:10 3092

原创 CSS3多列布局

最近买了基本书，因为在实习的时候用到很多CSS动画，师父给任务的时候，也会让布局一些设计页面。在做的过程中，觉着自己的css功底还是不行，所以就想再多积累多学习。今天主要看的是大漠的《图解CSS3》，看知乎上和很多人的技术博客里都推荐过。今天先说CSS3的多列布局。平时用到的比较多的是两栏布局，三栏布局。方法也有好几种，浮动float、定位position、行内快inline-block。要是再

2016-03-06 10:55:34 1349

原创 javascript代码获取css属性

今天做项目，过程中需要用js代码获取到css属性的值，网上百度了一下，有自己写函数的，但是实在太长了，我都不爱看啊，后来在张鑫旭的博客鑫空间鑫生活里看到了几行代码，恰巧是可以获取css属性的。//获取相关CSS属性var getCss = function(o,key){ return o.currentStyle? o.currentStyle[key] : document.d

2016-03-04 17:49:05 1021

原创 CSS画出一个三角形

今天做转盘，需要有一个三角形的指针，考虑到不想加载一个图片，就想能不能自己画一个。开始还真没画对，老师给指点了以后，明白了怎么画。html代码：<!DOCTYPE html><html><head> <title>用css画一个三角形</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css"

2016-03-04 17:34:23 782

原创 jsonp跨域请求

这一周都在使用jsonp跨域请求，记录一下做的项目和过程中遇到的问题。JSONP：JSON with padding的简写 (填充式JSON/参数式JSON)。 JSONP与JSON看起来差不多，只不过是包含在函数调用中的JSON。上面这句话要好好理解，JSONP其实是一个函数调用，如：函数名（ { json内容 } ）; javascript高级程序设计中这么说的：

2016-03-04 17:06:21 631

季诗筱的博客