简单记录下今早做H5上传中一些代码还有坑 一、展示 因为前端上传文件是必须通过form表单的，不能使用ajax，这样的话一个移动页面放入一个type为file的input真心不怎么好看，如下图，很挫有没有解决办法找了下，PC上有些是把这个input换成flash，采用jquery的工具库比如uploadify来做，但是移动端大部分浏览器是不支持flash的。所以最后采用的办法还是用form表单的形式，只是把这个form和input的透明度设置为0，让它们和准备显示的内...
我们经常参加各种电商优惠活动，比如购买达到一定数额进行抽奖活动，在比如微信抽奖，淘宝抽奖，迅雷赚钱宝圆盘抽奖活动等。这些抽奖活动部分就是由HTML5的Canvas来制作的，今天就为大家分享一下如何使用HTML5的Canvas来制作圆盘抽奖功能。老规矩，先看下效果图吧：再来看看Canvas的几个主要api： 全部源代码如下：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>HTML5 Canvas圆盘抽奖应用DEMO演示<...
本文实例编写的一个小游戏，基于HTML5中的canvas。游戏主要是小球反弹击打小方块。在代码中主要实现了小方块的生成，键盘键事件的监听，小球的移动和碰壁之后的反弹以及怎样消除小方块等方法。代码使用到了一个js脚本库 游戏开发流程： 1、创建画布： 将画布放在div标签里面，这样可以控制画布居中的位置，再对div标签加上一些样式比如border和border-radius，这样一来使其看上去像手机，利于观看。 <div id="main"><!--将画布嵌在...
本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下 1.数据获取 画地图需要省份边界坐标，理论上可以每次都用百度API获取数据并绘图，但为了增加效率，首先将所有坐标都获取下来并存入数据库中。 新建省份数据数组代码如下:var allZoneData = [{name:辽宁省,been:yes,id:01},<span style="font-family: Arial, Helvetica, sans-serif;">{name:吉林省,been:yes,id:02},……];</span> 轮询该数组，...
这是一款十分炫酷的HTML5 3D书本翻页动画，效果相对比较简单，拖拽鼠标模拟用手翻页，更漂亮的是翻页过程中，呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示，非常酷。在线演示 源码下载 HTML代码 <div class="book p3d"><div class="back-cover p3d"><div class="page back flip"></div><div class="page front p3d"><div class="shadow"></div><div class="dino"></div></div></div><div class="front-cover p3d"><div c...
PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。 用的技术主要是： ajaxFileReaderFormDataHTML结构：<div class="camera-area"><form enctype="multipart/form-data" method="post"><input type="file" name="fileToUpload" class="fileToUpload" accept="image/*" capture="camera"/><...
本文实例为大家分享了javascript html5实现多文件上传的实现方法，具体内容如下 HTML结构：<div class="container"><label>请选择一个图像文件：</label><input type="file" id="file_input" multiple/> </div> 顺便说下这个上传的主要逻辑： 用input标签并选择type=file，记得带上multiple，不然就只能单选图片了绑定好input的change时间，重点就是如何处理这个change事件了，使用H5新的FileReader接口读取文件并打成base64编码，...
表单验证为终端用户检测无效的数据并标记这些错误，是一种用户体验的优化。 下面展现浏览器自带的验证功能也可在移动端中查看： HTML部分： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"><title>html5 表单验证</title> </head> <body> <form action="#" id="formValid" class="myform" novalidate...
这款HTML5焦点图不仅可以手动点击按钮切换图片，而且还支持自动切换图片，使用起来也相当方便。如果你需要在网站中展示产品图片，那么这款焦点图插件非常适合你。在线演示源码下载 HTML代码 <section id="dg-container" class="dg-container"><div class="dg-wrapper"><a href="#"><img src="images/1.jpg" alt="image01"><div>http://www.colazionedamichy.it/</div></a><a href="#"><img src="images/2.jpg" alt="image02"><div>...
也许你见过HTML5图片破碎动画特效，实现的原理也挺简单的。但是你应该没有见过视频也可以破碎重组，这个HTML5动画就是利用Canvas的相关特性，实现了点击鼠标让视频破碎重组的效果。在视频区域点击鼠标，即可让该区域的视频破碎，让后经过一段时间后，破碎的区域又可以重组还原，视觉效果非常棒。HTML代码 <div style="display:none"><video id="sourcevid" autoplay="true" loop="true"><source src="BigBuckBunny_640x360.mp4" ty...
本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能，分享给大家供大家参考，具体内容如下 1. lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) {var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);document.cookie = name + =+ escape (value) + ;expires= + exp.toGMTString(); } function getCookie(name) {var arr,reg=new RegExp((^| )+name+=([...
最近有时间了解了下html5的各API，发现新浪微博的头像设置是使用canvas实现截图的，加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传《JavaScript File API文件上传预览》，更加觉得html5好玩了，想着也试试写写这功能权当学习canvas吧。 下面奉上我自己写的一个demo，代码写得比较少，很多细节不会处理。如果有不得当的地方恳请指教，谢谢啦 ^_^ ^_^ 功能实现步奏：一、获取文件，读取文件并生成url二、...
本文实例讲述了HTML5游戏引擎LTweenLite实现的超帅动画效果。分享给大家供大家参考，具体如下： lufylegend.js是一个开源的HTML5游戏引擎，在游戏中往往会有各种的动画，这些动画有些是flash文件，有些是视频文件，本次就来利用lufylegend制作一个帅气的游戏动画，如下图。测试连接如下： http://lufylegend.com/demo/effects01/ 一、准备工作 准备工作当然就是引擎的下载了。 lufylegend.js引擎官网 http://lufylegend.com/lufyle...
本文实例讲述了js实现input密码框提示信息的方法。分享给大家供大家参考，具体如下： 今天我们主管说要在密码框加入个"请输入密码"的提示信息,第一次的时候本来想着用修改input type 属性的方法呢,结果有某些特别的浏览器不支持,IE的input的type属性是只读的,不能动态设置.所以换其它的方法,实例如下:<input type="text" onfocus="changeTip(this);" id="passText" name="passText" value="请输入密码"/> <input style="display: ...
最近都在学习HTML5，做canvas游戏之类的，发现HTML5中除了canvas这个强大的工具外，还有WebSocket也很值得注意。可以用来做双屏互动游戏，何为双屏互动游戏？就是通过移动端设备来控制PC端网页游戏。这样的话就要用到实时通讯了，而WebSocket无疑是最合适的。WebSocket相较于HTTP来说，有很多的优点，主要表现在WebSocket只建立一个TCP连接，可以主动推送数据到客户端，而且还有更轻量级的协议头，减少数据传送量。所以WebSocket暂...