这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。 下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。 HTML代...
一、indexedDB为何替代了Web SQL Database？跟小朋友的教育从来没有什么“赢在起跑线”这种说法一样，在前端领域，也不是哪来先出来哪个就在日后引领风骚的。HTML5 indexedDB和Web SQL Database都是本地数据库数据存储，Web SQL Database数据库要出来的更早，然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始，就已经注定Web SQL Database数据库是明日黄花。未来一定是indexedDB的，从目前浏览器的兼容性来看，也表明...
初入前端，分享一下手机上触屏版轮播器的实现过程，大致功能如下：支持循环滑动宽度可任意设置，不需要与屏幕等宽页面可纵向滚动可设置回调监听元素的切换纯js，不借助任何第三方库原理假设子元素.item的width为375px，使用绝对定位将所有子元素放在父元素内将父元素.carousel的width设置为375px，与子元素.item宽度相同为父元素.carousel添加触摸事件：touchstart, touchmove, touchend手指按下时，保存初始位置（clientX）手指滑...
一、indexedDB为何替代了Web SQL Database？ 跟小朋友的教育从来没有什么“赢在起跑线”这种说法一样，在前端领域，也不是哪来先出来哪个就在日后引领风骚的。 HTML5 indexedDB和Web SQL Database都是本地数据库数据存储，Web SQL Database数据库要出来的更早，然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始，就已经注定Web SQL Database数据库是明日黄花。 未来一定是indexedDB的，从目前浏览器的兼容性来看，也表...
测试demo的github地址: github.com/lily1010/html5_geolocationHTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。一 基于浏览器的HTML5查找地理位置html5中的GPS定位功能封装在 navigator.geolocation 属性里,有三种方法:(1) getCurrentPosition 只获取一次用户的位置(2) watchPosition 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上...
HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。前言HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了 draggabl...
伪类和伪元素皆独立于文档结构。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征，而是在处于特殊状态的元素（伪类），或者是元素中特别的内容（伪元素）。区别总结如下：CSS伪类 (Pseudo-classes)：用于向某些选择器添加特殊的效果，即在元素当前静态样式的基础上添加特殊效果（一般都是动态效果），所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。属性描述:acti...
本文主要介绍了jQuery实现在HTML文档加载完毕后自动执行某个事件的方法,结合实例形式分析了document的ready()事件自动加载执行事件的相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。原来onchange=“fucntionname（parms）”；<select name="country" id="selCountries_{$sn}" onchange="region.changed(this, 1, selProvinces_{$sn})" style="border:1px solid #ccc;"><option value="0">{$lang.please_select}{$name_of_r...
本篇文章主要介绍了详解JS获取HTML DOM元素的8种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧什么是HTML DOM文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。这篇文章不做深入研究，只把各种用法和坑做一个总结...
今天接到一个任务,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的，其中还弄了个闪光灯.但是纯H5的没接触过,心里没底,于是晚上回家开始网上各处找方案.以下是我对于H5扫描二维码以及调用本地摄像头的理解以及代码.希望能帮助到大家。科普网址:H5如何生成安卓组件对象H5调用安卓本地摄像头api在线二维码图片生成器二维码扫描:(使用的是mui的框架,下面是ht...
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。安装 Webpack在安装 Webpack 前，你本地环境需要支持 node.js。由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm首先全局安装webpack，再npm初始化一个项目，并局部安装webpack开发工具$ npm install webpack -gnpm init (项目名称)$ npm install webpack-dev-server --save-dev在项目目录下...
开始用createjs这个框架的时候，发现网上的相关教程还是挺少的，所以写一篇文章，方便日后查看。 createjs简介官网：http://www.createjs.cc/createjs中包含以下四个部分：EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控）TweenJS：用于做动画效果SoundJS：音频播放引擎PreloadJS：网站资源预加载 类似于SoundJS，PreloadJS，如果自己处理起来比较方便的话，也可以自己写，总的来说...
最近看到vue-router的HTML5 History 模式路由的实现，然后顺便又去研究了一下HTML5 的 History，以下是自己的一些理解，顺便用jquery写 一个实现类似vue-router里面HTML5 History 模式路由器,以达到练练手，熟悉熟悉的目的。一、history.pushStatehistory.pushState(state, title, url); 上面第一和第二个参数可以为空，主要就是第三个参数，表示新历史纪录的地址，浏览器在调用pushState()方法后不会去加载这个URL，新的URL不一定...
下面小编就为大家带来一篇HTML5标签嵌套规则详解【必看】。小编觉得挺不错的，现在分享给大家，也给大家做个参考前面的话 在html5中，<a>元素的子元素可以是块级元素，这在以前是被认为不符合规则的。本文将详细介绍html5的标签嵌套规则分类 html5出现之前，经常把元素按照block、inline、inline-block来区分。在html5中，元素不再按照display属性来区分，而是按照内容模型来区分。分为元数据型(metadata content)、区块型(...
HTML5中的几种变形HTML5中的变形，共有以下几种方法scale() 缩放rotate() 旋转translate() 平移transform() 矩阵变形setTransform() 重设矩阵这几个方法，对图片一共能完成下面几种处理但是，如果要实现下面这种不规则的变形，就不行了那咱们一步步，先来看HTML5的这几个方法。1，缩放方法如下<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="800" height="280"></canvas> <script type="text/javascript"> var1. HTM...