mutongwu
- 浏览: 438911 次
- 性别:
- 来自: 广州
-
最新评论
-
ubuntu的疯狂：
推荐一份完整的教程：http://blog.ddlisting ...
Emberjs学习 -
ptz19：
请问，如果把合并前的文件，不要dest 目标目录来。如： js ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008：
楼主，还有个问题，<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008：
感谢楼主，用到了您的代码， 但现在好像有改动 否则会报错：修改 ...
gulp下静态资源的合并、压缩、MD5后缀 -
denverj：
感谢分享~
Emberjs学习
文章列表
:arrow:
1. 纯前端的打包输出,比较有局限
2.目录结构
|--build
|--app
|--base //基础核心文件，譬如jQuery，公共Util等
|--css
|--images
|--plugins //jQuery插件
|--jquery.lazyload.js
|--page //功能页面模块，每个模块至少包含一个和文件夹同名的js，作为打包入口
|--common
|--orderCommon.js
|--xxx.js
|--orderDetail
|--o ...
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript" src="lib/jquery.js"></script>
<s ...
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//源码
src: "asserts",
//输出
dist: "dist",
transport: {
options: {
paths:[&qu ...
优先使用 requestAnimationFrame实现。
实验中发现，IE中的requestAnimationFrame 对象，在页面载入的时候，似乎是不可用的。 所以在 domContentLoaded事件以后再读取，才是安全的。
<script>
//没有输出!
console.log(window.requestAnimationFrame || window.msRequestAnimationFrame );
window.onDomContentLoaded = function(){
//这里就有了。
console.log(wi ...
https://github.com/fex-team/fis-postprocessor-amd
+
https://github.com/hefangshi/fis-postpackager-autoload
+
https://github.com/hefangshi/fis-postpackager-simple
可以说是 https://github.com/fex-team/mod 的加强版，前者对amd模块做了更好的兼容和打包功能。
个人在使用上，有点不方便的地方：在写一个UI组件的时候，例如： Button，那么常见的，它应该包含 Button.js 和 Button. ...
scrollMagic（https://github.com/janpaepke/ScrollMagic）是一个页面滚动控制的js库。利用它，可以监听页面的滚动，控制页面元素的样式。
scrollMagic 本身比较简单，只包含2个类：
crollMagic.Controller 一个控制器，用于总体的动画调度 ；
ScrollMagic.Scene 一个或多个具体舞台画布，用于设计具体的CSS变换。
需要注意的是，它本身并没有集成 animation的控制方法，动画的实现，需要引入插件 GSAP 或者是 VelocityJS .所以，实际开发的时候，页面基本会引入三个js：
scrollM ...
skrollr ( https://github.com/Prinzhorn/skrollr ) 是一个独立的js特效库。使用方法为在 dom元素上直接编写动画的开始、结束，这些“配置参数”最终会由js读取解析。使用的要点：
1. 由于会对元素做CSS3的动画变形，实际的应用中，通常会把元素设置为 position: fixed；或者 absolute;
2. 这样就要求页面的每一个分块都有 height的 CSS控制，从而方便计算。
3. 元素的定位支持paga和viewport两种，具体的参数设置，可以上官方github查看。
<!DOCTYPE html>
& ...
<!DOCTYPE html>
<html>
<head>
<title>Parallax Scrolling Website</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png&quo ...
<!DOCTYPE html>
<html><head>
<title>测试</title>
<meta charset="UTF-8">
<style>
*{margin:0;}
/* The wrapper */
.b-block {
position: relative;
display: inline-block;
overflow: hidden;
width: 10em;
...
关于字体图标和SVG图标，CSS TRICK网站有较好的说明。
https://css-tricks.com/icon-fonts-vs-svg/
总的来讲：
1. 字体图标浏览器支持多一点。(IE6+)
2. SVG显示效果好一些，更多的CSS控制（例如：支持图标颜色渐变），制作相对简单些。(IE9+)
需要补充的是，SVG有以下缺点：
1. 对于IE浏览器，SVG文件需要 inline到HTML页面。
2. 对于外联的SVG文件，测试中发现，不支持跨域使用，即便 svg文件做了CROS头部设置。
针对以上2个问题，解决的方式，就是额外加载外联svg文件，并把它插入到HTML页面里 ...
var gulp = require('gulp');
var RevAll = require('gulp-rev-all');
var uglify = require('gulp-uglify');
var filter = require('gulp-filter');
var csso = require('gulp-csso');
var useref = require('gulp-useref');
gulp.task('default', function () {
var jsFilter = filter("**/*.js" ...
1. DOMContentLoaded 在页面html、script、style加载完毕即可触发，无需等待所有资源（image/iframe）加载完毕。（IE9+）
2. onload是最早支持的事件，要求所有资源加载完毕触发。
3. onreadystatechange 开始在IE引入，后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, frame, frameset, iframe, img, input:image, link, script, xml
标签的元素，都触发该事件。通常来讲，会有 loading /interactive/comp ...
据说 translateZ(0)可以触发GPU渲染，提高动画的性能。
切换的属性变化，可以有2种：
1. transform:translateX的值
2. left的值；
这里动画切换比较简单，看不出有什么优势。
二、采用translateX属性值控制容器位置：
<!DOCTYPE html>
<html><head>
<title>qqqqqqqq</title>
<meta charset="utf-8">
<meta name="viewport&qu ...
<!DOCTYPE html>
<html><head>
<title>qqqqqqqq</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta nam ...
插件的文档写得不是很好，为了能弄出异步加载的功能，小折腾了一番。
插件地址：
https://github.com/ludo/jquery-treetable
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery treetable</title>
<link rel="stylesheet" href="css/screen.css&quo ...