满屏背景图的几种实现方法

不知何时QQ空间的登录页面也设计成一种大背景图片的形式,非常抢眼,在高级浏览器下缩放页面图片保持原样。之前经常会看到这种技术运用在一些比较有艺术感的网站上,我也研究过其代码,做法是用js根据缩放比例乘图片的宽和高,然后重新赋值。这样,浏览器缩小了n倍的同时图片放大了n倍,正好抵消掉,所以图片看上去没什么变化,QQ空间采用的便是这种方法。
full
除此之外,还有一些比较简便的方法,先来看看纯样式的实现:
我们可以通过CSS3的background-size属性来实现,用html元素(html比body好,因为它最接近浏览器高度),再设置背景固定和居中,设置background-size为cover来自适应元素。

曾在new ebay上看到其缩写方式:

浏览器支持情况:

  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+
  • Firefox 3.6+

当然这还不够,IE9以下不支持CSS3。我们用一个可以在任何浏览器下缩放的inline img元素。用min-height来填充纵向浏览器窗口,设置width 100%来横向填充,设置min-width为图片的宽度来防止图片缩小到小于它的实际宽度。
这里还使用了@media检测浏览器窗口,如果小于图片宽度,就用left 50%和负margin来保持图片居中。

浏览器支持情况:

  • Safari / Chrome / Opera / Firefox支持良好
  • IE6由于不支持fixed定位固没通过
  • IE7/8只是在小尺寸的时候没有居中但还是能充满整个窗口
  • IE9以上支持良好

Continue reading →

动态改变网页图标

目前绝大多数网站都配有一个网站图标(Favicon),就是页面标题前面的小图标,一般命名为favicon.ico,存放在网站的根目录下面。通常我们配置网站图标的代码如下:

经过测试发现IE仅支持ico格式的小图标,其他主流浏览器支持jpeg,gif,png格式,火狐下支持gif动画。
最近看到一个开源项目Piecon,能够动态生成饼图网页图标来表示网页加载进度,同时可以显示加载百分比,大家可以在Github上搜索源代码。
研究一番后,搞清楚了Piecon的基本原理:利用HTML5的Canvas保存为data:image扩展功能,将生成URL形式的图片设置到favicon的URL上进行替换。
Canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image。
我们来看一下使用Piecon生成的Base64编码的URL字符串,代码如下:(把href中的代码粘贴到浏览器地址栏回车即可看到图片)

Piecon显示的加载进度效果并不是网页内容加载的真实进度,只是用setInterval函数模拟的效果。对此我用5张ico格式的图片来模拟进度,让IE也能实现动态改变图标。代码如下:

结果确令人大失所望,火狐等浏览器有效,IE无效。虽然在head中删除旧的link标签与插入新的标签是成功的,但IE里面通过JS去操作dom元素不会反映到html源文件中去。一开始认为可能是缓存问题,但即便加上随机数也无效。

立体动感的视差滚动效果网页

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为今年网页设计的热点趋势,越来越多的网站应用了这项技术。
这让我联想到了我初学CSS的时候关注的一个网站css Zen Garden (禅意花园)。设计者们丰富的想象力把同样结构的网页设计成一个个精美的作品。而今天我要介绍的视差滚动效果网页犹如当年的禅意花园,当然内容是不一样的,还可以使用js脚本语言,页面表现力更为丰富。
首先来看看几个优秀的例子:
Head 2 Heart

Saucony Kinvara 3

Intacto 10 Years

Ok Studios

人人网V6新版抢鲜体验

我找了一个比较酷的网站提取了带有这种效果的代码,分享给大家,其实原理很简单,滚屏控制背景位置而已。使用jquery的动画函数将会使代码更简单。

点此查看具体效果

创意且实用的两种布局

去年很早就看到过Pinterest这种布局。有人称之为瀑布流布局,有人称之为格子堆砌布局等。刚开始看到这样的页面,就被他那漂亮的图片和网站风格所吸引,有非常强的视觉冲击。如今这种布局已有很多网站效仿,多用于新闻,设计,产品,图片展示等。可见这种布局是非常受欢迎的。
今年元月十号,豆瓣猜新版首页上线。豆瓣猜是通过算法自动推荐给你的个性化内容。新版的布局很有创意,虽然没上述的布局那么强的视觉冲击,但每天通过3种类型的格子进行排列,图文并茂,简洁而大方。这是豆瓣的风格。
一直觉得瀑布流这种布局实现起来很简单,没亲自动手写过,今天趁此机会简单实现一下。我的思路跟Pinterest不同,我是先分好六列,然后在插入元素的时候比较每列的高度,新创建的元素插入到最矮的那一列中,完整代码:

提示:你可以先修改部分代码再运行。

在写代码过程中,刚开始获取高度我用的是计算样式,后来想想offsetHeight也行。觉得offsetHeight应该性能上快一点吧,便去jsPerf上做了个比较,结果后者比前者快了250倍左右(火狐9.0),http://jsperf.com/getheight

仿谷歌眼睛追踪效果

昨天无聊的时候翻了下以前保存的东西,看到了谷歌的眼睛追踪效果DEMO,感觉自己也可以写写,就写出来了,最终效果上稍微有些差别。
先看一下谷歌的例子:眼睛追踪效果
这里的主要难点的获取圆的坐标值,如果有公式的话,就能用代码写了。于是我翻阅了以前同事发我的PPT“极坐标系”,有兴趣可以下载看看。
这里圆(眼珠运动的轨迹)的坐标就可以用x = r * cosθ,y = r * sinθ来表示。
Math.atan2()函数返回点(x,y)和原点(0,0)之间直线的倾斜角。那么如何计算倾斜角θ呢?只需要将两点x,y坐标分别相减得到一个新的点(x2-x1,y2-y1),然后利用他求出角度就可以了,使用下面的一个转换可以实现计算出两点间连线的夹角。

下面我们完整的代码贴出来:

提示:你可以先修改部分代码再运行。

canvas画板

之前对HTML5 Canvas API进行了一个简单的介绍,今天我写了一个简单的画板,可以选择画笔颜色噢,话不多说,赶紧动手画画吧!

提示:你可以先修改部分代码再运行。

有关CanvasRenderingContext2D 对象的属性可以参考w3school

canvas+video=背景视频

你可能学过<video>和<canvas>这两个标签,那有没有想过这两个标签结合起来使用呢。其实,两个标签结合使用可以发生有趣的事情。下面来看一个简单的实例。

我们给<video>标签设置了两个属性controls和loop。controls是向用户显示控件,比如播放按钮,loop是循环播放。在<video>标签中包含3个子元素<source>,每一个引用一段不同编码格式的视频,来兼容不同的浏览器。
不知道大家有没有用过在windows桌面播放视频,有些播放器可以支持这个功能。接下来我们就用<video>和<canvas>模拟这个有趣的功能。

html和css代码:

我们让视频在浏览器中居中,并让canvas布满浏览器,把canvas元素放在前面是让他在视频的底下,来达到背景播放的效果。
js代码:

这段js代码很简单,添加一个播放事件,在canvas上画出播放时的放大画面,效果如下:
Continue reading →

css3模仿airplay播放器界面

今天给大家介绍个极小巧的绿色音乐播放器AirPlay,该播放器大小不到1M,界面华丽功能强大,无论在 XP 还是 Windows7 下都能显示华丽的半透明玻璃特效,另外还支持歌词、专辑图片下载,读取压缩文件等功能,可以说麻雀虽小,五脏俱全,是我见过的最好的音乐播放器!
我用这款播放器已经有一年多了,没有更新过,百看不厌。某天我同事说这个界面能做成网页形式也挺好的,乘空余时间,我用html5和css3模仿了它的界面。
这里用到了css3的圆角、背景渐变、阴影、动画等效果,仅兼容firefox 3.6+和chrome 10+。可以参考我以前的文章css3新增的五个属性
chrome10以下的渐变写法比较繁琐我就没写了,感兴趣话的可以参考下面给出的资料。

提示:你可以先修改部分代码再运行。

下面给出airplay官网地址,喜欢的话下载去吧:-P:http://www.podez.com/zion.php
新版地址:http://www.podez.com/index.html

参考资料:
背景渐变(CSS3 Gradient Backgrounds):http://css-tricks.com/examples/CSS3Gradient/
动画效果:http://www.w3schools.com/css3/css3_transitions.asp
CSS Border使用小分享:http://ued.taobao.com/blog/2010/08/04/css-border使用小分享/

关于css的一些文章

在工作中我总会遇到一些很麻烦的兼容性问题,这些问题网上的解决办法甚多,我会亲自尝试,并把问题解决,但我有时候并不清楚问题出现的原因。当类似的问题再次出现,我可能记住了解决的办法,也可能忘了再去网上查,这样效率会十分低下。所以只有弄清事物的本质,才能更快更有效地解决问题。下面介绍一些长期以来能帮我有效解决问题的一些好的文章,希望对大家有所帮助。

在我眼里,IE6一直是个大麻烦,工作中遇到较多的是关于layout的问题,这里推荐一篇译文:
On having layout

下面一篇文章详细地介绍了容易混淆的两个属性line-height和vertical-align:
小结line-height和vertical-align

垂直居中的方法有很多,多数都是已知元素高度的垂直居中,这里介绍了2种未知高度的垂直居中方法,一种用js解决,一种是纯css解决:
未知高度元素的垂直居中
Continue reading →

移动互联网

最近看到开复老师在微博上发布了关于创新工场创业频道的信息,我便顺藤摸瓜探个究竟。

其中有个视频演讲吸引了我:从现实跨越到未来——互联网手机时代的创新机会

这个演讲主要是将未来移动互联网的发展,其实不看这个视频我们也能知道个大概,因为我们都在使用手机,基本上会通过手机上网,对手机的平台和应用都不会陌生,手机的更新换代速度很快,其实我们都置身于移动互联网的发展之中,不难看出它的发展趋势。

过去的智能手机由于受到平台,带宽,资费,支付,用户需求等瓶颈的限制,都不能算是真正的互联网手机。真正的互联网手机已经出现了,第一代真正的互联网手机就是Iphone和Android的手机。他们天生是为了上网和浏览互联网应用而设计的。去过手机市场的都能摸到最新的智能手机,他们的特点都是大屏幕触屏版几乎都不带键盘。我去过顺电试用过各个品牌的手机,印象最深的还是IPhone,其他的品牌的使用体验略逊Iphone。而最近上市的索尼爱立信X10i在我心中的排名第二,他使用的是Android平台。

在这里Android扮演的是一个标准的平台,他是开源的,能被所有的手机厂商使用,能支持完整的互联网标准。这样的一个平台的出现能让大大小小的手机厂商都能投入到智能机或者互联网手机的制造和生产中,这样的一个竞争态势会使智能手机的价格迅速的下来,到那时就是互联网手机的天下。

在未来5年内,网页版应用的数量将超过原生应用,这里HTML5将扮演着重要的角色。他有以下几个优点:
— HTML5能以最轻量级的代码实现互联网的富体验,而无需插件。
— 免下载,用户接入门槛低
— 一次开发,全平台部署,不受多平台开发之苦。

所以作为一个前端开发者,应该了解互联网的发展趋势,不断更新自己的知识结构才能在未来的互联网事业中处于不败之地。