Coding Serf - Web

当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...

用Canvas播放视频

一、为什么用Canvas来播放视频 1、用更高帧频来替代视频本身的timeupdate事件。因为视频的timeupdate事件是在浏览器保证视频正常加载并正常渲染的情况下才去考虑触发的,因此就有了250ms触发一次timeupdate事件的说法,也就是一秒四帧。当然,视频播放肯定会比这个帧频高很多。 2、避免在小屏幕iOS设备上全屏播放视频。苹果的Safari Developer Library中《Safari HTML5 Audi...

HTML5 API 探秘 – Web Worker

Web Worker 是什么 Web Worker 为 JavaScript 在浏览器里的运行提供了多线程接口。这样一来,我们就可以把那些复杂的耗时的不涉及DOM操作的运算抛给浏览器的一个后台线程来处理。(据说)这种线程是操作系统级别的。 让我们来看一段代码,简单了解一下 Web Worker 的 API: /* @constructor 构造函数 Worker(JSURL); @param {DOMString} JSURL是要在后台线程中执行的JS文...

HTML5+jQuery+CSS3自定义视频播放器

关于HTML 5中Video接口的详细介绍可以参看W3School的HTML 5 视频/音频参考手册,这是写一个播放器的基础。闲言少叙,直切正题,下面是播放器的最终效果: 首先来看一下HTML代码以及播放器的调用: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VideoPlayer</title> <link rel="stylesheet" typ...

关于Windows Phone 8平台IE 10的一个bug

澳大利亚官方旅游网站告一段落,本来一切是那么完美…… 然而不幸的是,你可能已经注意到这句话正上方图中那个红圈圈了~对,它是Lumia 720,装的是 Windows Phone 8 的系统,跑的是Internet Explorer 10(Mobile)的浏览器。你猜对了,这次又被IE给坑了! 问题描述: 这个登录框是个popup的div,所以很明显它是Ajax登录的,我有一个异常充分的理由可以让你暂先不管这种方式在安...

Canvas入门之“我去年买了个表”

就是个基础画…… 最终效果: // 12 ? hour-12:hour; drawHand(hour*5+(date.getMinutes()/60)*5,true,false); drawHand(date.getMinutes(),false,true); drawHand(date.getSeconds(),false,false); }function drawClock(){ ctx.clearRect(0,0,c.width,c.height); drawCircl(); drawNums(); drawHands(); drawCenter(); }window.setInterval(draw...

利用HTML5重力感应识别手机的甩动方向

去年的圣诞节怎么过的已经忘了,不知道是不是和海底捞有关,反正是和“圣诞捞”(FlipScript在2012年圣诞节的活动网站)有关。 先简单地介绍一下“圣诞捞”的玩法:网站分为PC端(Flash开发)和手机端(HTML5开发)两个部分,用户先要通过PC端打开网站获取手机端URL(或者直接发送URL短信到手机),在手机端输入并打开此URL,就可开启与桌面端...

iOS上用JS控制滚动时position:fixed元素错位的Bug

“你滚与不滚,它就在那里,动也不动!” 最近项目中有个sidebar的控件,即始终紧贴在浏览器左或右边的,通过点击这个sidebar中的button来完成相应的页面交互。可是页面在iOS5.1中显示时,这个sidebar却表现地有些蹊跷…… 当用脚本控制页面滚动时(如scrollTop();),这个被fixed的元素你看到它的确是没有动,此时你再想点击这个sidebar上的...

自定义下拉框NO.2——致我们终将改头换面的<select>

这次的select是纯CSS,所以只是改头换面,不像之前都“洗心革面”了…… .feedback-dropdownlist{display: inline-block;position: relative;width: 48%;height: 35px;overflow: hidden;background-color: #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.7) inset,1px 1px 8px rgba(0,0,0,.2);-moz...

用jQuery模拟backgroudSize的cover效果

CSS3新增属性backgroud-size有个cover值你知道吧?显示个什么效果你……不知道的话来这里看看。 But!兼容性呀兼容性!虽然modernizr也收集了一个jQuery的polyfill插件,可惜我的ie6-7下不起作用。issues里也有人反映,只是作者貌似NB大发了…… 我和这个polyfill的作者一样不想把时间花在给(对我而言)别人的插件找bug上,所以就自己写了一个,当然这代码写得太以自我为中心了...

文章归档
友情链接
参与项目
  • 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