iteye_12132-优快云博客

webpack简单打包PC网站前端资源

2016-02-23 14:30:40 1054

简单下拉框模拟

[code="html"]Image preview example /*下拉模拟*/.simSelect { display:inline-block;position: relative;border: 1px solid #ccc; line-height: 34px;text-align:center; }.simSelect:afte...

2015-06-19 16:19:38 294

grunt构建基于seajs的网站实现

Gruntfile.js[code="js"]module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), //源码 src: "asserts", //输出 ...

2015-06-16 16:49:21 247

js平滑滚动回到顶部

优先使用 requestAnimationFrame实现。实验中发现，IE中的requestAnimationFrame 对象，在页面载入的时候，似乎是不可用的。所以在 domContentLoaded事件以后再读取，才是安全的。[code="js"] //没有输出!console.log(window.requestAnimationFrame || window.msRe...

2015-06-10 11:42:30 847

fis-amd 的使用与修改

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-...

2015-05-26 16:14:28 227

scrollMagic 视差与滚动动画GSAP

scrollMagic（https://github.com/janpaepke/ScrollMagic）是一个页面滚动控制的js库。利用它，可以监听页面的滚动，控制页面元素的样式。scrollMagic 本身比较简单，只包含2个类：crollMagic.Controller 一个控制器，用于总体的动画调度；ScrollMagic.Scene 一个或多个具体舞台画布，用于设计具体的C...

2015-05-19 18:14:53 3492

skrollr-视差滚动动画插件

skrollr ( https://github.com/Prinzhorn/skrollr ) 是一个独立的js特效库。使用方法为在 dom元素上直接编写动画的开始、结束，这些“配置参数”最终会由js读取解析。使用的要点：1. 由于会对元素做CSS3的动画变形，实际的应用中，通常会把元素设置为 position: fixed；或者 absolute;2. 这样就要求页面的每一个分...

2015-05-19 14:18:02 455

stellar插件的使用

[img]http://dl2.iteye.com/upload/attachment/0108/6730/ebe83531-de0b-3b58-8a0a-99e44476a4d9.png[/img][code="html"]Parallax Scrolling Website ...

2015-05-18 17:30:24 614

原创四个方向鼠标滑入的css动画

[code="html"] 测试 *{margin:0;} /* The wrapper */ .b-block { position: relative; display: inline-block; overflow: hidden; width: 10em; hei...

2015-05-14 18:08:26 424

icon font VS svg font

关于字体图标和SVG图标，CSS TRICK网站有较好的说明。https://css-tricks.com/icon-fonts-vs-svg/总的来讲：[b]1. 字体图标浏览器支持多一点。(IE6+)2. SVG显示效果好一些，更多的CSS控制（例如：支持图标颜色渐变），制作相对简单些。(IE9+)[/b]需要补充的是，SVG有以下缺点：1. 对于IE浏...

2015-05-14 15:21:12 475

gulp下静态资源的合并、压缩、MD5后缀

[code="js"]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 usere...

2015-05-05 15:48:10 285

DOMContentLoaded VS onload VS onreadystatechange

1. DOMContentLoaded 在页面html、script、style加载完毕即可触发，无需等待所有资源（image/iframe）加载完毕。（IE9+）2. onload是最早支持的事件，要求所有资源加载完毕触发。3. onreadystatechange 开始在IE引入，后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, fra...

2015-04-30 14:50:08 361

简单的css3全屏滚动-左右方向

据说 translateZ(0)可以触发GPU渲染，提高动画的性能。切换的属性变化，可以有2种：1. transform:translateX的值2. left的值；这里动画切换比较简单，看不出有什么优势。二、采用translateX属性值控制容器位置：[code="html"] qqqqqqqq ...

2015-04-28 15:17:32 1021

简单的css3全屏滚动

[code="html"] qqqqqqqq body,#wrapper{min-height:100%;height:100%;overflow:hidden;} #wrapper section{position:absolute;width:100%;height:100%;min-height:100%;} sec...

2015-04-27 16:41:02 1085

jquery插件treetable 的使用

插件的文档写得不是很好，为了能弄出异步加载的功能，小折腾了一番。插件地址：https://github.com/ludo/jquery-treetable[code="html"] jQuery treetable table{font-size:16px;} ta...

2015-04-20 16:12:28 801

原创纯CSS3的图片slider

[code="html"] body{background:#000;}.container{ margin:50px auto; width:500px; height:300px; overflow:hidden; border:10px solid; border-top-color:#856036...

2015-04-16 14:36:37 228

原创 sublime 侧边栏字体大小修改

【转载自：http://jekhy.com/2014/08/07/sublimeText3-sidebar-fontSize/】首先需要确保安装了Package ControlPackage Control作为ST必备插件，这里就不多介绍了，没装的话，google一下，各种介绍以及安装教程贴，当然，使用其官网的安装命令是最靠谱的了：https://sublime.wbond.net...

2015-04-16 10:46:16 429

原创移动端的“点透”问题

移动端的“点透”问题，这篇博文有较好的说明：http://www.cnblogs.com/zldream1106/p/3670988.html移动端的事件触发顺序： touchstart -> touchend -> click通常的情况是：1. A区域是一个浮层，绑定touchstart/touchend事件，事件函数将A区域隐藏。2. 点击发生的位...

2015-04-15 14:13:50 144

scheme缺少,ie的bug

在页面上定位一个资源（JS/CSS/image），通常的url是这么写的：http://www.a.com/a.css或者使用相应路径 "./a.css" 或者是绝对路径 "/a.css"，这种好处是可以自动使用当前页面的协议、端口、域名还有一种: "//www.a.com/a.css" 这种写法规避了同一个网站，同时支持 http/https访问的情况。看起来不...

2015-04-01 17:34:38 158

大整数相加

[code="js"]function repeatStr(ch, n){ var str = ""; for(var i=0; i< n; i++){ str += ch; } return str; } functio...

2015-03-26 22:18:48 131

原创 getBoundingClientRect 跨浏览器实现

[code="html"] function GetOffset (object, offset) { if (!object) return; offset.x += object.offsetLeft; offset.y += object.offs...

2015-03-18 18:30:06 217

window.name 跨域

window.name跨域的基础是：iframe页面在其url改变的时候，不会改变name的数据，从而通过proxy页面（与应用页面相同域名）的跳转，绕过跨域的限制。[b]name传输的数据，大小一般为2M，IE和firefox下可以大至32M左右。[/b][code="js"]CrossDomain = { // 设置的代理文件 proxy: 'http://s...

2015-03-18 17:29:45 196

HTML History API

[code="js"]// 替换当前浏览器history的最后一项记录。history.replaceState([data], [title], [url]);//在当前history的中，添加一项记录。history.pushState([data], [title], [url]);//1). In Firefox data is limited to 640k...

2015-03-13 18:05:51 205

爬取网站的图片之一

[code="js"] var http = require('http'); var fs = require('fs'); var request = require('request');function base64_decode (data) { var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefgh...

2015-03-05 18:12:15 128

爬取网站的图片

[code="js"] var http = require('http'); var fs = require('fs'); var request = require('request'); var CryptoJS = require('crypto-js');function decode(code) { code = cod...

2015-03-05 18:06:17 197

Emberjs学习

断断续续看了3周，还是一头雾水，文档不是很友好，这个框架，太多潜规则，学习曲线太大了。简单记录一些学习笔记。1. Ember适用于单页面网站的构建。依赖 jQuery 和 Handlebars 2个库。2. 基于路由的控制有2种方式：带hash的url和支持history API的url。前者要求IE8+,后者要求IE10+。有关浏览器支持部分，请参阅：http://...

2015-01-27 17:13:36 301

如何读写伪类元素的样式？

示例：[code="html"]Hi, this is a plain-old, sad-looking paragraph tag..example::before { content: 'pseudoElement '; color: red;}[/code][b]一、读取，使用 window.getComputedStyle 方...

2014-12-17 10:00:54 265

performance的资源计时统计

以下内容原文来自：http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/http://www.stevesouders.com/blog/2014/11/25/serious-confusion-with-resource-timing/按照自己的理解，做了整理。[b]一、基本定...

2014-12-10 17:16:56 333

原创 ES5 小结

[code="JS"] Trailing commas are ok- No reserved words for property names- NaN, Infinity, undefined : are all constants- parseInt() defaults to radix 10- /regexp/ produces new reg ex object e...

2014-12-09 15:12:44 96

js图表库比较

[table]|库|特点||canvasjs|无依赖，动画效果弱，API参数设置简单清晰，自定义控制少。||amcharts|无依赖，动画效果弱，动画效果好，API参数设置简单清晰。||highcharts|依赖jq/moontool或者其他的基础库，适合PC端、图表类型多、API完备，参数设置繁多。||flot|依赖jq。无动画效果。控件模块拆分比较好，可以按需加载。支持自定...

2014-10-28 14:39:25 186

原创 hashchange 插件

[code="js"](function($){ var hashchange = 'hashchange', DOC = document, documentMode = DOC.documentMode, supportHashChange = ('on' + hashchange in window) && ( documentMode === und...

2014-09-04 11:50:57 261

原创 ETAG Cache Expires

[b]http://msdn.microsoft.com/en-us/library/bb250442(VS.85).aspx[/b]Table 1. Client Cache Headers[table]|Pragma: no-cache|The client is unwilling to accept any cached responses from caches alon...

2014-09-02 17:29:27 79

跨域iframe通讯

[code="js"]/** * @author wushufeng * * 跨域的js通信，允许子页面再次嵌套iframe。利用了IE6/7的navigator对象是公用的hack。 * 注意：为了能兼容IE6/7，使用的时候需要保证： * 1. 要通讯的iframe必须指定name属性; * 2. 要通讯的iframe的name属性，必须唯一。 * u...

2014-08-15 11:38:14 110

d3js的拖拽树

[img]http://dl2.iteye.com/upload/attachment/0099/6998/9e9341fb-e217-304f-bc07-72de299ebd63.jpg[/img]

2014-07-31 11:22:08 1527

跨域的localstorage

IE6/7不支持，其它浏览器ok。[b]1. 有个代理页面，放在公共的域名下。[/b][code="html"](function(){ function handleRequest(event){ try{ var data = JSON.parse(event.data); var storage...

2014-07-03 14:38:05 1749

日期解析函数

半成品，凑合用一下。[code="js"]function parseDate(str,fm){ var start = 0,ch1 = null,ch2 = null; var chReg = /^[yMdhms]$/, nReg = /^\d$/; str = str.replace(/^\s+/g,'').replace(/\s+$/,...

2014-06-27 15:58:49 105

模拟滚动条

[code="html"]Insert title here #wrapper{width:300px;background: #ff0;position:fixed;right:10px;top:20px;bottom:0;color:#fff;} #wrapper{*height:100%;} .box{overflow: hidd...

2014-04-10 09:37:00 113

原创纯CSS3的loading图案

转自：http://www.cssplay.co.uk/menu/cssplay-loading-animation.html[code="html"]div.loading {width:200px; height:200px; position:relative; float:left; margin:0 10px;}div.one {background:#0...

2014-03-26 10:57:42 156

原创纯CSS3的图片集点击放大

[code="html"] .slideshow {width:300px; height:60px; margin:250px auto;}input {position:absolute; left:-9999px; display:none;}label.toggle {display:block; width:80px; height:60px;...

2014-03-26 10:15:00 1631

javascript 模板替换函数

支持数据多级嵌套和数组：[code="js"]var applyTpl = (function(){ var reg = /\{([\w\.]*)\}/g; var regArr = /(.*?)/g, regArrIdx = /\{#i\}/g, regArrVal = /\{#val\}/g; function ge...

2014-02-27 16:59:06 394

空空如也

如何在服务器端 读取Ext.ux.UploadDialog上传的文件？

如何在服务器端读取Ext.ux.UploadDialog上传的文件？