摘要: 原文:http://css-tricks.com/snippets/css/a-guide-to-flexbox/弹性布局(弹性盒子,现今仍是w3c的候选推荐),目标在于,对于一个容器中的各个项目块之间能够有效地放置空白的区域,并且不管空白区域是不定宽的、动态的。弹性布局背后的思想就是 使得容器中的... 阅读全文
posted @ 2014-04-23 14:34 hlily 阅读(2714) 评论(0) 推荐(1) 编辑
摘要: 说明(1)原文:http://css-tricks.com/line-clampin/(2)非直译需求: 当文字长度超过N行时,文字后面自动用省略号补齐。比如,你有如下的HTML代码: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam eges. 阅读全文
posted @ 2014-04-09 11:47 hlily 阅读(1179) 评论(0) 推荐(0) 编辑
摘要: 众多有图片的产品,都要加个图片预览功能。然后市面上就出现了各种各样的相册,下面也提供一个基于jquery的相册。源码:https://github.com/lilyH/gallery版本: v0.1版功能:(1)支持鼠标点击,键盘左右的图片下一张,下一张 (2)支持屏幕缩放的时候,重新计算图片的位置,保证图片位置屏幕的中间样子:功能还比较简单,希望自己能坚持一直修改下去。。。 阅读全文
posted @ 2014-04-03 11:22 hlily 阅读(282) 评论(0) 推荐(1) 编辑
摘要: 问题:固定宽度的容器,当字符串长度大于容器宽度的时候,后面出省略号。有同学会说,这还用的到JS吗?用CSS就好了,white-space:nowrap;text-overflow: ellipsis;overflow:hidden 。嗯,是这样的。不过有时候问题比这还负责,比如说,文字后面还需要跟一个图标,当字符串长度过长的时候,文字要有省略号,但是图标还要显示。这种时候就没办法了,需要用到JS来做字符串的截断。下面利用二分法来实现截取需要的字符串,希望能够有更简洁的方式来交流:/**** 放一个span在页面上,el是这个span的dom元素节点,把需要截取的字符串放到span里面,然后通过 阅读全文
posted @ 2014-03-20 16:10 hlily 阅读(364) 评论(0) 推荐(0) 编辑
摘要: 原文地址:http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/这篇文章是一篇老文了,现在才看到,真是落后啊。快速点击:像原生一样的触发app这篇博客最初是发表在Assanka的博客上的,后来12年1月的时候Assanka被金融时代收购了,成为了现在的FT实验室。12年8月的时候,把FastClick放到了GitHub上,将会一直使用GitHub来托管。利用JavaScript API 来实现触摸事件和手势是一个非常直观的尝试。随着Webkit浏览器对web标准更多的支持,Web apps 越来越接近原生 阅读全文
posted @ 2014-02-26 11:41 hlily 阅读(2058) 评论(0) 推荐(1) 编辑
摘要: 问题(1)webview里面出现大图预览,点击手机上的返回,应该是图片预览消失问题(2)键盘输入的时候,键盘会把输入框遮挡----------------------------------------------------------------------------------------一、手机上的返回按键用户的体验应该是手机上按“返回”以后,返回到上一个浏览器的页面。比如下面的的例子,假设我们从http://b.com这个 url跳转到 http://a.com 这个URL下,看到了下面图(1)所示的内容,然后呢,点击图片以后,看到大图预览的页面(图2);在做大图预览的时候,因为这 阅读全文
posted @ 2013-11-06 18:31 hlily 阅读(2000) 评论(2) 推荐(0) 编辑
摘要: 原文链接:文章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/这篇文章提供了四种方法,让你的移动web提升“感知性能”,看起来更像是原生app。这四种方法中第一种是给button增加触摸状态,“为了让你的网站看起来更快,你需要让你的button在用户触摸以后立即反应,这样会让用户觉得发生了什么,而不是在等 阅读全文
posted @ 2013-10-11 15:59 hlily 阅读(1577) 评论(0) 推荐(1) 编辑
摘要: 问题:总是有这样的需求,就是页面上某部分要位于页面的最底部,此“最底部”要求:(1)当页面上内容不足一屏的时候,在最底部显示(2)当页面上内容不止一屏的时候,也就是有垂直滚动条的时候,要在内容的最后显示最容易想到的定位方法:(1)position:absolute position:absolute;bottom:0;left:0此种方法只能把该元素定位到第一屏的最底部,它并不会随着滚动条的出现跑到内容的最后面去。满足(1)不满足(2)(2)position:relative此种方法只能满足(2),不能满足(1),当然要满足(1)的话,可以配合使用js, 思路是利用JS计算屏幕高度,减去底部高 阅读全文
posted @ 2013-09-22 21:51 hlily 阅读(3096) 评论(2) 推荐(2) 编辑
摘要: 小伙伴们是不是经常在手机上见到“转场"的情况,手机上的页面转换已经不像pc上整体的页面跳转,很多都是利用动画平滑地在页面之间的切换。那么如何来做页面之间的转换呢?首先要明确的是,所谓的页面之间的切换其实是单页里面元素的切换。比如如 下图所示,中间center部分就是当前在视口区域的,也就是我们能看到的,而两边的就是我们现在看不到,但是随时待命的区域。切换的思路很简单:就是利用CSS的动画效果,左右切换元素,让用户只能看到中间可视区域的内容。所以思路就是:(1)把需要切换到可视区域的部分放在动画的起始位置(2)利用CSS3的动画,开始滑动(3)滑动到指定的位置当然在实现中,开启利用CS 阅读全文
posted @ 2013-09-13 12:31 hlily 阅读(1927) 评论(0) 推荐(0) 编辑
摘要: 请问您的母语是什么?一些人回答C语言,一些人回答PHP语言,一些人回答JS语言,当然大部分人的答案还是汉语。回归正题,JS至少也算的上前端工程师的第二语言。所以平时在使用的时候,也应该尽量做到言简意赅,比如能使用“赞”的时候,就不要使用“非常好非常好”这样的重复叠词。 避免重复的获得元素在一个代码块中,需要操作DOM对象的时候,需要获得这个DOM对象,会经常有这样的代码出现(以Qwrap为例):// : (W('#items').addClass("hide");...W('#items').removeClass("hide&qu 阅读全文
posted @ 2013-06-13 15:11 hlily 阅读(227) 评论(0) 推荐(0) 编辑