为交互添加恰当的音效，常常能改善用户体验。在我们所熟悉的windows里，清空回收站的碎纸声就是很好的例子。下面是一个利用HTML5, Jquery，给页面添加音效的小组件（只是添加音效，并不是播放器）。其实很简单，就是利用HTML5中的audio标签，播放声音。不过为了照顾IE 6-8，还是用上了bgsound。兼容所有主流浏览器（非主流不在考虑之列了）闲话少说，上代码： 代码如下:播放/*Play sound component*//* * profile: JSON, {src:...
通过jquery+html5实现，当浏览器窗口缩小或者手机访问的时候，导航菜单变成按钮下拉式菜单。效果图：HTML代码： 代码如下: Button Button jQuery代码： 通过以下jquery代码，会把添加到中，当点击 #menu-icon 时，菜单就会显示出来： 代码如下: 通过浏览器查看元素可以看到html显示的代码如下： 代码如下: Menu Button Button CSS代码： 在css代码中要先把#menu-icon的属性设置为display:none;，然后通过媒体查询media que...
效果图： 方法一：代码如下: your browser does not support the canvas tag var deg = 0; var r = 30; var rl = 100; function drawTaiji() { var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var colorA = "rgb(0, 0, 0)"; var colorB = "red"; var px =Math.sin(deg)*r; var py =Math.cos(deg)*r; context.clearRect(0, 0, 300, 300); context.beginPath(); context.fillStyle =...
类似猎豹浏览器安装时的用户须知效果。点击后效果代码如下:<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>fold paper effect by gt-柯乐义</title><style> #wrapper {-webkit-perspective: 55cm;-webkit-perspective-origin: 50% 50%;text-align: center; } .paper {position: relative;height: 40px;width: 5em;margin: 0;background-color: aqua;-webkit-transition:...
html结构样式如下： 代码如下: 添加图片 从样式上说应不显示input元素的输入框，这时需将input设置为透明样式，然后将其覆盖到button元素上方，这时方可实现点击button上传图片。将accepted设置为“image/*”，则只允许图片类文件上传。 Css样式如下 代码如下: .addpic{ position:relative; margin-left:100px; width:95px; height:30px; } .addlogo { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); cursor...
在HTML5中实现Canvas阴影效果 代码如下:Canvas Clip Demo
这不能说我们虚荣，多少年来，基本的HTML API一直没有任何发展，以至于当有一个小的新功能出现时，例如placeholder，都会让我们露出新奇的眼神。尽管新式的浏览器中实现了很多HTML5特征，但大部分程序员仍对一些小的、非常有用的API不了解或从未听说。本文中我将介绍一些这样的API，并欢迎大家发掘出更多不为人知的HTML5 API！ Element.classList classList API提供了我们多年来一种使用JavaScript工具库来实现的控制CSS的基本功能...
代码如下:HTML5 图片上传预览http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">$(function(){ $('#img').change(function(){ var file = this.files[0]; //选择上传的文件 var r = new FileReader(); r.readAsDataURL(file); //Base64 $(r).load(function(){ $('div').html(''); }); });});HTML5 图片上传预览html代码教程/参考手册 htm...
代码如下: var Loading = function (canvas, options) { this.canvas = document.getElementById(canvas); this.options = options; };Loading.prototype = { constructor: Loading, show: function () { var canvas = this.canvas, begin = this.options.begin, old = this.options.old, li...
这里要讲的一个简单的HTML5功能是当页面加载完成时让输入焦点自动落到某个元素上；这个动作用autofocus属性完成。 HTML代码非常简单：代码如下:Hi!当有了autofocus属性，这些 INPUT, TEXTAREA, 或 BUTTON元素都能在页面加载是被选中。但如果使用纯显示元素，例如H1标记，autofocus属性并不好用。 这个属性在某些情况下非常有用。例如谷歌的首页，人们99%的时间都是用它来搜索，所以页面一旦加载，光标必然定位在输入框里。以前需要...
使用HTML5制作时钟 代码如下: html5时钟 var Clock = function (canvas, options) { this.canvas = canvas; this.ctx = this.canvas.getContext("2d"); this.options = options; };Clock.prototype = { constructor: Clock, drawCircle: function () { var ctx = this.ctx; ctx.strokeStyle = "black"; ctx.ar...
HTML5的诞生给我们提供了很多精彩的JavaScript和HTML新功能和新特征。有些新特征我们已知多年并大量的使用，而另外一些主要是用在前沿的手机移动技术上，或者桌面应用中起辅助作用。不管这些HTML5新功能有多强大，多好用，它们都是为了帮助我们更好的开发浏览器前端应用。我之前给大家分享过一篇你不知道的5个HTML5新功能，目的是希望里面的提到的一些技术能帮助改进你的web应用。这里我还想分享给大家一些少有人知道的HTML5新功能...
我从网上找到了一个案例，是用来摇一摇换颜色的，非常好用，不过测试后，需要注意的有： 1、必须要ios或者是安卓4.0以上的才能实现功能应用。 2、如果加如z坐标的判断，就会出现屏幕乱变颜色的情况，估计太敏感了…………或者是没找到对的用法，希望大家能给指正 3、这个功能稍微改改，就可以变成抽奖的方法，比大转盘、刮刮卡要时尚些，哈哈 代码如下: var color = new Array('red', 'blue', 'yellow', ...
Canvas一般是指画布，最近对用html5写游戏比较感兴趣，所以简单的用了一下Canvas。 之前接触Canvas是在silverlight和wpf上用到过他，在silverlight上Canvas是一个绝对定位的容器，里面可以放任何控件。我们通过他可以构建画布、图形应用、GIS应用等。 在html5中，canvas是一个新增的标签：代码如下:他有基本的html标签的所有属性，一样可以给他设置style。 代码如下:canvas{width:400px;height:400px;background:#000;} 他还有一个...
效果图：提示：把代码复制到一个html文件中并保存，直接打开即可看到效果。 实现代码：代码如下:HTML5 Demo#apDiv1 {position:absolute;width:120px;height:300px;z-index:1;left: 840px;top: 80px;} Your browser does not support the canvas element. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); ctx.translate(400,300); ctx.clearRect(-400,-300,800,600);ctx.strokeSty...