程序猿最爱
前端技术乐园

最新发布

前端技术

【视频】css动画实用技巧

作者( 冰果 )原文(http://www.imooc.com/view/357)

Hello,大家好,今天跟大家聊一下,如何使用css3动画属性来实现惊艳的动画效果。

CSS想必大家都用过,那么你可知道使用CSS还可以实现一些有意思的动画效果?今天就请大家随着我们的课程,一起去领略一番吧!

551b98ae0001e57906000338-590-330

阅读全文 »

前端技术

移动端实现标题文字的截断

作者( 冰果 )原文(http://runjs.cn/code/7tj0geji)

适用场景

当屏幕分辨率为320X500时模块标题效果如下:

当屏幕分辨率为480X500时模块标题效果如下:

也就是当屏幕分辨率大时显示的文字多,分辨率小时显示文字少,同时需要保证这一部分始终完全显示。

实现方式

方案一: DEMO 来自@蒋轩哲

  1. 整个容器标题文字容器 添加 overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 保证内容在一行内显示。效果如下,我们需要显示的网站标识同时也被省略掉了,这时我们接着改进
  2. 标题文字容器添加 display:inline-block;max-width:100%;设置容器最大宽度为100%,这时我们发现网站标识被挤到了下面
  3. 网站标识容器添加 display:inline-block;margin-left:-6em; 通过设置负margin让我们网站标识可以出显示在标题行里
  4. 标题文字容器接着添加 padding-right:6em;box-sizing:border-box; 通过设置box-sizing属性值为border-box,把padding-right值占用的位置计算到了标题文字容器里,注意:padding-right的值正好是网站标识容器margin-left的调整的值。调整完后的效果如下:

  5. 最后我们调整一下标题文字容器网站标识容器的垂直对齐方式让它们垂直居中对齐

方案二:DEMO 来自@guopi

  1. 标题容器添加 display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%;
  2. 最后我们调整一下对齐方式让内容在整个容器中垂直居中对齐

方案三:DEMO 来自@snadn

  1. 标题容器添加 display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:top; 这里我们提前把垂直居中对齐设置好了。
  2. 又整个容器 添加white-space:nowrap; 把内容控制成一行显示
  3. 接着为又整个容器添加margin-right:100px;把标题内容限制在一定的宽度内,好让网站标识显示出来。
  4. 在上面的效果中发现灰色背景也同时被限制在了一定的宽度内,所以我们把背景的设置提出来放在整个容器上,最终效果如下:

方案四:DEMO 来自@snadn

  1. 标题容器添加 display:inline-block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 100px);
  2. 最后我们调整一下对齐方式让内容在整个容器中垂直居中对齐

总结:

  1. 方案一和方案三对于不同分辨率下的截断效果比较统一
  2. 方案二在不同分辨率下有些差异,比如分辨率较大时内容会截断的多一些,分辨率小时内容又会截断的少一些
  3. 方案四在移动端的兼容性不是很好慎用。

阅读全文 »

前端技术

[译]给菜B准备的新手指南:四种感知优化技巧,让你的手机站点高端起来

作者( chajn )原文(http://www.mobify.com/blog/beginners-guide-to-perceived-performance/)

原文:http://www.mobify.com/blog/beginners-guide-to-perceived-performance/

编者语:本文约有4500字。内容涵盖于面向手机的网站在感知性能方面的几个点,以及加快访问速度的可执行方案。不想读太长文章的小朋友们注意了,本文可不是说如何给糟糕网站插上翅膀飞起来噢,它是琢磨如何让用户的感知体验趋于自然的。

阅读全文 »

前端技术

when.js的原理及快速实现

作者( akira_cn )原文(http://www.imququ.com/post/promises-when-js.html/)

这篇文章可以看作是屈屈同学关于when.js的文章《异步编程:When.js快速上手》的续篇。

屈屈的文章中详细介绍了when.js,在这里关于when.js的使用我就不多复述了,大家可以自己去研究它的API。

在这里,我主要想讨论的是如何实现一个when.js类似的promise/A框架。为了更清晰了解实现原理,我略过when.js中一些比较强大的功能,只实现其中最核心的功能,包括基本的then(),otherwise()以及比较好用的all()和any()。

更多内容点击这里

阅读全文 »

前端技术

关于图片DATA URI的更多优化

作者( welefen )原文(/post/%E5%85%B3%E4%BA%8E%E5%9B%BE%E7%89%87data-uri%E7%9A%84%E6%9B%B4%E5%A4%9A%E4%BC%98%E5%8C%96.html)

我们知道,对于很小图片使用DATA URI可以减少图片的请求次数,从而达到优化的目的。但IE6、IE7并不支持(不讨论另类的方式让IE6、7也支持),所以一般是下面的处理方式:

阅读全文 »

前端技术

小谈页面重构该如何提升?

作者( 小强 )原文(/post/%E5%B0%8F%E8%B0%88%E9%A1%B5%E9%9D%A2%E9%87%8D%E6%9E%84%E8%AF%A5%E5%A6%82%E4%BD%95%E5%8F%91%E5%B1%95.html)

做为一个专职的页面重构者,我们所从事的工作简单的来说就是:“将设计稿转换成WEB页面”。随着工种的细分,加上页面重构本身的专业性,独立成为一个职业也是大势所趋,相当可观的薪水也从另外一个方面证实了该职业具有很好的发展前景。

图片来源:七年很痒

阅读全文 »

前端技术

javascript二进制文件处理方案

作者( poker )原文(/post/javascript%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%96%87%E4%BB%B6%E5%A4%84%E7%90%86%E6%96%B9%E6%A1%88.html)

众所周知,javascript是不支持二进制文件和数据的。传统的做法,是把二进制文件转成字符,然后在浏览器里,通过某些技巧把对应字符串换成数字,然后做其它处理(传统方法会在后面讲到)。这种处理方式不标准,需要某些“技巧”,甚至通过“欺骗”浏览器才能实现。

阅读全文 »

前端技术

href javascript target onclick 执行顺序 浏览器兼容问题

作者( bower )原文(javascript: dosomething();)

在修改别人代码的时候发现了如下代码

在chrome 中会执行dosomething(),没有任何问题,

在IE中会打开一个路径为javascript: dosomething();新窗口并报错

显然 这不是return false一类的问题

经过测试 我总结一下 href javascript target onclick 执行顺序 浏览器兼容问题

阅读全文 »

前端技术

关于WaterFall瀑布流式布局的性能优化

作者( Chevion )原文(http://www.qwrap.com/)

最近一次项目改版需求,完成了一个瀑布流的扩展组件,基于QWrap库。新版已发布上线,入口:我喜欢

市面上已存在的瀑布流式布局的网站: 拼范网:http://www.pinfun.com/ 迷尚网:http://www.mishang.com/ 凡客达人:http://star.vancl.com/ 美丽说:http://www.meilishuo.com/ 蘑菇街:http://www.mogujie.com/welcome/ 淘宝哇哦:http://wow.taobao.com/ IDsoo:http://idsoo.com/ Topit:http://topit.me/ Mark之:http://markzhi.com/ 布兜:http://www.budou.me/ 堆糖:http://www.duitang.com/ 花瓣:http://huaban.com/ 码图网:http://www.markpic.com/popular/ 新鲜网:http://www.xinxian.com/ 易惊喜:http://www.ejingxi.com/

阅读全文 »