dasuo1170-CSDN博客

转载尝试写一下对象的序列化

问题: 如何把一个object序列化的显示?这种需求其实还是很多的, 主要都是为了方便查看object.比如一个object , {"name":"lucyhao","age":"18"}, 显示成如下{ "name" : "lucyhao", "age" : "18"}　　首先说明一下JSON.stringify已经把序列化的工作做了...

2016-08-19 10:45:00 162

转载在hexo静态博客中利用d3-cloud来展现标签云

效果： http://lucyhao.com/tags/hexo自带的tag cloud的标签展现不太美观，想能够展现出“云”效果的标签。在网上找到了d3-cloud这个项目，github地址：https://github.com/jasondavies/d3-cloud demo地址：https://www.jasondavies.com/wordcloud/hexo生成的是静...

2016-02-22 17:34:00 397

转载博客转移

新博客 http://lucyhao.com欢迎访问~转载于:https://www.cnblogs.com/lilyimage/p/5175888.html

2016-02-01 17:40:00 121

转载利用flexbox实现按字符长度排列dom元素

说明：请使用chrome浏览器打开See the Pen pvyjGV by lilyH (@lilyH) on CodePen.如上图所示，我们你要实现的效果就是，（1）在一行中显示两块元素；（2）每块元素的长度根据它里面的文字变化还是先看代码吧：HTML<ul class="flex-container"> <li class...

2014-12-11 21:16:00 162

转载巧妙利用before和after伪类实现文字的展开和收起

需求：一段文字，当收起的时候，显示4行，并且多余4行的部分用省略号表示，关键是在省略号前面留有空白部分来放一些图标等东西；展开的时候，全部显示。例如下面的示例图：收起的时候：展开的时候：在不用JS的情况下，如何能只用CSS就做到呢？(一)先看下html结构<div class="summary" data-content="天空为什么是蓝色×××...

2014-11-10 15:14:00 351

转载基于zepto判断mobile的横竖屏状态

借用jquery mobile中的代码，删除了一些多余的部分，简单的基于zepto的模块var CheckOrientation = (function(){ var win = $( window ), get_orientation, last_orientation, initial_orientation_i...

2014-10-29 15:44:00 81

转载 mobile touch事件

touch.js众所周知，mobile与pc 前端开发的不同中，有一点就是事件的不同，mobile上有touchstart,touchmove,touchend等，而pc上用最多的应该还是我们的click事件。mobile上，自己又喜欢用zepto.js库（喜欢有时候就是一种先入为主的感觉），但是zepto-touch又不争气，有这那的问题（比如穿透什么的）。只好抛弃它，fastcl...

2014-09-02 14:48:00 110

转载利用CSS实现带相同间隔地无缝滚动动画

说明：因为在移动上主要利用CSS来做动画，所以没有考虑其他浏览器的兼容性，只有-webkit这个前缀，如果需要其他浏览器，请自行补齐。首先解释一下什么是无缝滚动动画，例如下面的例子See the Pen css实现上下循环滚动效果 by lilyH (@lilyH) on CodePen.----------------------------------------...

2014-08-06 10:35:00 534

转载 zepto-selector.js简单分析

zepto 的selector模块是对jquery扩充选择器（jquery-selector-extensions）的部分实现。比如这样的选择方法：$('div:first')和el.is(':visible')。下面是原代码，简单的写了一些注释～;(function($){ var zepto = $.zepto, oldQsa = zepto.qsa, oldM...

2014-06-23 17:59:00 142

转载 fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html，fastclick可以解决在手机上点击事件的300ms延迟；另外我们也知道zepto的touch模块，帮助我们实现了很多手机上的事件，比如tap等，tap事件也是为了解决在click的延迟问题。那么他们有什么区别呢？先看zepto的touc...

2014-05-22 20:49:00 127

转载 [译]flexbox全揭秘

原文：http://css-tricks.com/snippets/css/a-guide-to-flexbox/弹性布局（弹性盒子，现今仍是w3c的候选推荐），目标在于，对于一个容器中的各个项目块之间能够有效地放置空白的区域，并且不管空白区域是不定宽的、动态的。弹性布局背后的思想就是使得容器中的项目块能够改变宽度和高度来最佳地填充可用的空间（为了适应不同类型的设备和屏幕宽度）...

2014-04-23 14:34:00 80

转载 [译]line clampin让文字在指定的行数内省略号显示

说明（1）原文：http://css-tricks.com/line-clampin/（2）非直译需求: 当文字长度超过N行时，文字后面自动用省略号补齐。比如，你有如下的HTML代码：<div class="module"> <p>Pellentesque habitant morbi tristique senectus et ne...

2014-04-09 11:47:00 129

转载基于jquery的相册预览gallery

众多有图片的产品，都要加个图片预览功能。然后市面上就出现了各种各样的相册，下面也提供一个基于jquery的相册。源码：https://github.com/lilyH/gallery版本: v0.1版功能：（1）支持鼠标点击，键盘左右的图片下一张，下一张（2）支持屏幕缩放的时候，重新计算图片的位置，保证图片位置屏幕的中间样子:功能还比较简单，希...

2014-04-03 11:22:00 109

转载利用二分法获得截取字符串长度

问题：固定宽度的容器，当字符串长度大于容器宽度的时候，后面出省略号。有同学会说，这还用的到JS吗？用CSS就好了，white-space:nowrap;text-overflow: ellipsis;overflow:hidden 。嗯，是这样的。不过有时候问题比这还负责，比如说，文字后面还需要跟一个图标，当字符串长度过长的时候，文字要有省略号，但是图标还要显示。这种时候就没办法了...

2014-03-20 16:10:00 137

转载 [译]FastClick: native-like tapping for touch apps

原文地址：http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/这篇文章是一篇老文了，现在才看到，真是落后啊。快速点击：像原生一样的触发app这篇博客最初是发表在Assanka的博客上的，后来12年1月的时候Assanka被金融时代收购了，成为了现在的FT实验室。12年8...

2014-02-26 11:41:00 75

转载 app内嵌web的一些问题记录

问题（1）webview里面出现大图预览，点击手机上的返回，应该是图片预览消失问题（2）键盘输入的时候，键盘会把输入框遮挡----------------------------------------------------------------------------------------一、手机上的返回按键用户的体验应该是手机上按“返回”以后，返回到上一个浏览器...

2013-11-06 18:31:00 107

转载有效的PhoneGap CSS: WebKit Tap Highlight Color

原文链接：文章1：http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html(此文非直译)因为文章2：http://www.mobify.com/blog/beginners-guide-to-perceived-performance/这篇文章提供了四种方法，让你...

2013-10-11 15:59:00 110

转载利用box-flex实现 dom元素位置页面底部

问题:总是有这样的需求，就是页面上某部分要位于页面的最底部，此“最底部”要求：（1）当页面上内容不足一屏的时候，在最底部显示（2）当页面上内容不止一屏的时候，也就是有垂直滚动条的时候，要在内容的最后显示最容易想到的定位方法：（1）position:absolute position:absolute;bottom:0;left:0此种方法只能把该...

2013-09-22 21:51:00 155

转载手机上的页面转换page slider

小伙伴们是不是经常在手机上见到“转场"的情况，手机上的页面转换已经不像pc上整体的页面跳转，很多都是利用动画平滑地在页面之间的切换。那么如何来做页面之间的转换呢？首先要明确的是,所谓的页面之间的切换其实是单页里面元素的切换。比如如下图所示，中间center部分就是当前在视口区域的，也就是我们能看到的，而两边的就是我们现在看不到，但是随时待命的区域。切换的思路很简单:就...

2013-09-13 12:31:00 96

转载优化JS的一些小tip

请问您的母语是什么？一些人回答C语言，一些人回答PHP语言，一些人回答JS语言，当然大部分人的答案还是汉语。回归正题，JS至少也算的上前端工程师的第二语言。所以平时在使用的时候，也应该尽量做到言简意赅，比如能使用“赞”的时候，就不要使用“非常好非常好”这样的重复叠词。避免重复的获得元素在一个代码块中，需要操作DOM对象的时候，需要获得这个D...

2013-06-13 15:11:00 82

转载在线播放视频

这算是一篇翻译的文字~主要参考dive into html5 中关于video的章节简介几乎在浏览器上看到的视频，都是通过第三方插件播放的。视频文件其实包括了两部分知识，一是视频的容器格式，一是视频的编码格式。而我们常说的mp4视频，其实mp4在技术上指的的这个视频的容器格式。视频播放的三步骤：（1）视频播放器解析视频的容器格式，得到视频里面视频流和音...

2013-03-12 17:17:00 172

转载 Ajax同步发送、字符串按步长截断

Ajax同步发送：(1)闭包的使用多个Ajax请求,同步发送(能同步发送几个?让浏览器自己去决定吧).同步发送,每个ajax请求单独处理自己的请求.for(var i=0;i<len;i++){ Ajax.post(url,param,(function(param,i){ return function(txt){ ...

2012-09-04 16:48:00 68

转载文件上传_HTML5与SWFUpload（2）

一、不支持HTML5上传的只能是flash~不过发现网上关于swfupload的文章实在太多了，还有中文手册~下载地址：http://code.google.com/p/swfupload/英文手册：http://demo.swfupload.org/Documentation/中文手册：http://leeon.me/upload/other/swfupload.h...

2012-07-24 12:04:00 344

转载使用HTML5的语义标签

2011-04-29时候的东西了，今天把它罗过来看了文章Using HTML5 semantic elements today，做了一点翻译原文地址：http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/?utm_source=feedburner&utm_medium=fe...

2012-07-20 17:56:00 64

转载文件上传_HTML5与SWFUpload（1）

要实现文件上传，要兼顾IE6份额还不小的市场情况，除了fashion的HTML5，SWFUpload还得用作降级方案。Nicholas有一个系列关于利用HTML5上传文件的博客“Working with files in JavaScript”，另外，这里还有一篇也很详细的利用HTML5上传文件的文章（中文版哦）http://www.html5rocks.com/zh/tutoria...

2012-07-09 17:27:00 220

转载对于初学者有效的JavaScript设计模式（3）

去年的这个时候看了一遍这个文章，说实话，看了等于没看。1、看了也没有理解，2、看了也没有在实际中用到，3、看了就忘了今年的这个时候又看到这个文章，隐隐约约觉得，“呀，我看过，还翻译过”，但是却对内容完全想不起来了。去年看这个模块的时候，看的云里雾里的，完全没懂。现在嘛，再来看这个模式，觉得豁然开朗啊，因为自己也就是在用这个模式来构建的代码。四、模块模式模块模式是基于对象...

2012-07-03 17:03:00 54

转载实训项目“你画我猜”总结_前端篇

为期4周的实训就要结束了，感谢团队中的每一名同学，才有了我们今天的成果。我们这个5人小团队（产品一位，测试一位，开发三位（两名后台，一名前端）），来自不同的学校，带着刚毕业的学生气一起组成了我们的“飞虎队”。从产品刚提出的手机版，被开发一致否决，决定做WEB版本开始，我们几乎每天开会，讨论需求，进度，接下来要做的事，优先级。最后我们采用了mysql+redis+php+js(ht...

2012-05-29 15:31:00 1206

转载对于初学者有效的JavaScript设计模式（2）

二、构造模式利用prototype 来构造自己的函数。 1 function Car(model,year,miles){ 2 this.model = model; 3 this.year = year; 4 this.miles = miles; 5 } 6 Car.prototype.toString ...

2012-04-12 14:30:00 49

转载对于初学者有效的JavaScript设计模式（1）

原文：http://addyosmani.com/resources/essentialjsdesignpatterns/book/1、一个设计模式必要的部分：(1)名称和描述Pattern Name and description(2)内容提示 context outline——是对用户哪方面需求的响应(3)问题陈述——正在解决的问题的声明，让别人能够理解模式的意图(4)解...

2012-04-12 14:24:00 48

转载 JQuery的结构-Dive into jQuery

原文参考：http://www.splashnology.com/article/the-structure-of-jquery-dive-into-source-code/2517/Jquery很流行了，那么它到底是怎么构造的，记得一位老师说过“结构是宝，一懂百了；结构不懂，一窍不通”。这句话深深地在我脑海里。。。。。总体结构1 (function( window, u...

2012-03-21 23:03:00 87

转载浏览器是如何工作的

这其实是一篇读书笔记。原文：http://taligarsiel.com/Projects/howbrowserswork1.htm译文：http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/随便扯两句，云时代可能就是浏览器的时代，不搞清楚浏览器，怎么在云时代混？浏览器的常见元素：(1)...

2012-03-15 19:09:00 61

转载 [译]6 Best HTML5/CSS3 Presentation Frameworks

程序员其实也是做PPT的。。。。（不知道在哪个图上看过）帅气的PPT是每个人都想要的。原文介绍了6款用HTML5/CSS3 来实现的展现框架。忍不住弄下来看了看。太帅气了。ps: 标题是源项目连接（尽量用源项目），download是我整理的连接（没有更新，只是用来学习用的）。1、html5 Slides google的工程师提供的，很简单实用。一个html搞定。do...

2012-03-07 15:00:00 85

转载检测浏览器是否有filter属性

2012-02-20 18:24:00 131

转载利用filter进行图片的旋转

在高级浏览器里面可以利用css3实现图片的旋转，可是对于IE来讲，需要利用filter属性。。利用filter进行旋转：（1）如果只用旋转90度，那么可以直接用BasicImage(rotation=参数)来实现，其中参数为： 0：不旋转；1：90度 ;2：180度；3：270度例子，旋转-90度，那么代码如下： IE：f...

2012-02-20 15:52:00 232

转载 HTML 结构

pre:来自书《Pro Html5 and Css3 Design Patterns》的第2章HTML Design Patterns, 不敢称为“设计模式”，尝试着用“结构”这个轻一些的词吧。HTML结构ContainerContents<html><head> <body> 　<h...

2012-01-31 18:04:00 88

转载 [译]使用HTML5的语义标签

看了文章Using HTML5 semantic elements today，做了一点翻译原文地址：http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3...

2012-01-13 18:25:00 65

dasuo1170的博客