Coding Serf - 2014

响应式与移动端(三):弹力十足的图文混排

想让一个区域富有弹性,并非只有一种办法。首先来看一下我们想要实现的效果: 显而易见,这样的布局需求是头像不动消息动。换句话说,就是两个头像始终贴边,而中间的消息就像有弹性一样随着不同的设备分辨率(窗口)自动伸缩。 一、BFC图文混排 要实现这样的布局首先要理解一个概念BFC——块级格式化上下文(Block Formatting Context)。 BFC是个独立渲染区域,它内部元素...

响应式与移动端(二):了不起的百分比

我们通常把使用百分比的布局称为流动布局,但这不重要,重要的是要理解如何更好地使用百分比。 一、宽度百分比 比如我们写了一个宽度为1000px的布局(通常我们把这种用px的布局叫做固定布局),但是当窗口宽度小于1000px时,显然会截掉部分内容。为了让内容能够随着浏览器窗口的大小的变化全部显示,我们需要使用百分比来布局。此外,你可能已经知道通过响应式中有名的media...

响应式与移动端(一):万事俱备了吗?

“响应式的目标就是移动端”。这句话看似狭隘,但是狭隘是现实的产物。 一、现实是个什么玩意儿 选择移动优先还是PC优先,这样的争论是没有意义的,让哪个终端先行都无可厚非,我们会从以后的讨论中看到这个问题的无关紧要。从现实来看,无论对设计师还是前端来说,在设计稿和布局上做减法要比做加法似乎更容易,因此也更受亲睐。所以我们在真正的制作过程中往往是PC优先的。 ...

响应式 3D Gallery 效果插件(for jQuery)

最近做Engine的官网,有个3D的Gallery效果,网上倒是有一些3D效果的插件,但元素尺寸基本都是写死的,不能满足我们响应式的需求…… 索性就自己写了一个。效果图如下: 如果浏览器不支持3D的transform那么我们就降级一下(这里使用了modernizr来检测CSS的属性支持),使用scale,如下图: 这里有个问题,插件的轮播动画用的是CSS3的transition,IE9是不支持transition的,但...

移动端ClipBox效果插件(for Zepto)

我该怎么介绍它呢?其实它很简单,没什么功能。但是既然已经做了个插件,想着没准也有人需要这样的实现,就拿出来共享一下吧,其实自己写一个也很简单。 效果我感觉用语言不好说,所以才给它起了这么个不知云的名字 —— clipBox。但还是简单描述一下吧,就是在一个框(Box)里可以拖动图片形成一种剪切效果,为的是在小屏幕上查看大图片。就像在一个小窗口里浏览Google地图一样...

【译】我希望自己尽早知道的7个JavaScript怪癖

如果对你来说JavaScript还是一门全新的语言,或者你是在最近的开发中才刚刚对它有所了解,那么你可能会有些许挫败感。任何编程语言都有它自己的怪癖(quirks)——然而,当你从那些强类型的服务器端语言转向JavaScript的时候 ,你会感到非常困惑。我就是这样!当我在几年前做全职JavaScript开发的时候,我多么希望关于这门语言的许多事情我能尽早地知道。我希望通过本文中分享...

如何在移动设备上调试网页

这篇文章所讲到的方法已经过时,请移步《移动端真机调试终极利器-BrowserSync》,欢迎分享更多工具。 手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台、厂商的不同而有种种兼容性问题。下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试。这里要说明的是,iOS平台只能用自带的Safari浏览器来调试,而Android平台也只能用google Chrome浏览器...

移动端Slider效果插件(for Zepto)

昨天,有位叫学智的哥们(和我大学一个同学(绰号-法师)同名不同姓)要做一个手机上的页面切换效果,虽然自己的期望和实际的效果相差并不是很大,但法师追求完美,眼睛里揉不得沙子的秉性,把他逼得急躁,惶恐,甚至有些迷失自我,不得不为解决一个bug不惜搞出十个bug,法师快哭了…… 此时,老天有眼,曾经逼迫他的伟大秉性尚且给他留了点智商,学智想起了我们群,对!就是我...

当Base64遇上大文件

base64的数据型文件在HTML中被使用(引用)已经不是什么新鲜事儿了。我们可以用很简单的几行代码就能写个本地的转换器: <input type="file" id="fileInput"> <output id="output"></output> <script type="text/javascript"> var fileInput = document.getElementById('fileInput'), output = document.getElementById('output'), reader...

CSS3 的 transition 和 animation

CSS3的演进之一是能够定义过渡和动画。多年来前端开发人员一直在寻求不用JavaScript或者Flash而直接使用HTML和CSS来设计交互效果。现在他们终于可以如愿以偿了。 用CSS3过渡,可以在元素状态发生改变的时候改变元素的外观和行为,比如,当鼠标滑过元素,当元素获得焦点,当元素被激活,或者当元素被URL作为目标时。 CSS3中的动画允许用多个关键帧改变一个元素的外观和行为。...

文章归档
友情链接
参与项目
  • 830.格林学堂
  • 840.精优教育
  • 850.拯救红包君
  • 860.不开心抢包包
  • 870.打大折
  • 880.金地广场(西安)
  • 890.Engine Group
  • 900.Starbucks Mooncake
  • 910.宝存科技
  • 920.诺优能
  • 930.Zuse
  • 940.新吉士
  • 950.KSNY x Darcel
  • 960.澳大利亚官方旅游网站
  • 970.圣诞捞
  • 980.FlipScript
  • 990.五维互动
Copyright © 2013-2014 Coding Serf | Powered By WordPress |Theme design By Coding Serf