使用 background-size 和 background-position 制作全景图片浏览

Feng Zhichao @ 11 August 2013

背景

做了一个很简单的全景图片效果效果。

在 github page 上直接查看页面效果

在 codepen 上查看实现代码和效果

全景图一般是一个宽高比(width/height)很大的图片。我这里使用了一个弹性的固定的宽高比(100/30)的显示框,默认显示图片正中,多出的图片会被隐藏掉。当鼠标在图片上移动时,会根据鼠标的位置(偏左或者偏右)来动态的移动图片,已达到可以查看图片全景的目的。

以下为实现中几个小技巧的解释:

前端页面替换文本的方法和一些小技巧

Feng Zhichao @ 10 July 2013

背景

在前端页面上,有的时候我们需要根据用户行为,替换的显示文本。比如 “显示/隐藏”、“展开/收起”。这是一个很常见的功能,实现起来也没有太大的难度。

CSS Tricks 有一篇文章谈及“替换文本的五种方法”(Swapping Out Text, Five Different Ways)。在这篇文章里,作者总结了使用五种实现方法,并且在评论里和很多读者进行了一些讨论分析。我在这里总结一些值得注意的东西。

很常见的一个场景是,有一个按钮,其文本需要在 "show" "hide" 之前交互替换显示。html 示例如下:

<button data-text-swap="Show">Hide</button>

CSS 水平对齐,当 vertical-align: baseline 遇上 empty inline-block

Feng Zhichao @ 25 June 2013

背景

在 CSS 中,vertical-align 水平对齐是一个容易出错的地方。今天我们谈谈我遇到的一个小问题,有一个空元素 (empty element) 无法和其他元素水平对齐。

代码和在线 demo 可以看这里

截图如下:

空元素水平对齐问题

一步一步实现并改进一个旋转照片功能 (Photo Swivel)

Feng Zhichao @ 18 June 2013

背景

css-tricks 前一阵子有一篇投稿,是一个旋转照片 (Photo Swivel) 功能的实现。(css-tricks 上的文章,以及 作者 Alex 的原文)。说实话我也不知道 Photo Swivel 这个东西该怎么翻译,但是这个效果在展示物品的页面上,对提升用户交互能力确实很有帮助。

该效果就是展示一个物品时(比如衣服或者眼镜),随着用户鼠标滑动位置的不同,显示不同的图片,来显示物品响应的角度外观。看实例,在图片上移动鼠标看看 (这个是最初的实现方法)。

这篇文章给出实现后,在文章的评论中,也有很多人给出了改进的更好的实现。这里我们做一下介绍和分析。(一定要看完啊,后面的改进也很棒)

最初的实现

Alex 的实现中,首先我们需要 7 张该目标不同方位的图片。这里他使用一个较复杂的 div DOM 结构将图片 wrap 起来,方便之后的处理。 html 如下:

如何使用‘纯CSS’来实现动态的技术雷达效果

Feng Zhichao @ 28 May 2013

背景

ThoughtWorks 公司定期会发布 Tech Radar,以一个雷达图表的方式来展示当前技术趋势。比如 2013 年 5 月的技术雷达: Tech Radar May 2013

我们尝试用 html/css 来创建一个酷一点儿 Tech Radar。

产出

html/css Tech Radar

移步 这里 可以看到当前的结果。

移步 这里 可以看到源码

注意: 由于只是为了验证 DEMO,所以目前只支持 Chrome 浏览器(只用了 chrome 的特有 CSS property)。理论上是可以扩展到 Firefox 和 Safari 的。

实现技术点

这个 Tech Radar 的实现是基于纯粹的 CSS(唯一的一点 javascript 是为了控制雷达旋转的启动与暂停,和样式没有关系)。Tech Radar 的 html 基本没有多余的 DOM element,是一个有意义的完好结构的文档。

© feng zhichao 2016