搜索

    杂文

    HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)

    本文介绍了HTML5 Canvas玩转酷炫大波浪进度图效果,具体如下:如上图所见,本文就是要实现上面那种效果。由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。

    详解html5 canvas常用api总结(二)--绘图API

    canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API。绘画的时候canvas相当于画布,而context相当于画笔。1.绘制线条moveTo(x0,y0):把当前画笔(ictx)移动到(x0,y0)这个位置。lineTo(x1,y

    canvas与html5实现视频截图功能示例

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~制作方法:1.在页面中加载视频在使用canvas制作这个截图功能时,首先必须保证页面上已经加载完成了这个视频,这样才能够方便的对其操作。如果使用下面直接嵌入<video>标签的方式:<video

    详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)

    前两天在开发在微信访问的HTML5页面,里面有个订单查询要选择时间,刚开始使用的<input type="date">输入框,没加任何的样式,效果是白色的背景再加上边框很丑,完全与整个背景不协调。刚开始设置了输入框背景色透明(background-color:transparent;),在iOS上面背景色和边框都没有了,但是在andrio

    HTML5】3D模型--百行代码实现旋转立体魔方实例

    最近研究魔方的玩法,就突然想用HMTL5写一个魔方的模型,由于魔方是一个3D的立方体,这次就试着用HTML5写了一个简单的3D模型。下面是预览画面。制作流程首先你需要下载Html5开源库件lufylegend-1.4.0魔方分为6个面,每个面由9个小矩形组成,现在我把每个小矩形当做一个类封装起来,因为现在建

    详解HTML5中表单验证的8种方法介绍

    在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义。就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误。换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。但是真正的表单验证是什么?是一种优化。之所以说表单验

    html5 postMessage解决跨域、跨窗口消息传递方案

    平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题1.页面和其打开的新窗口的数据传递2.多窗口之间消息传递3.页面与嵌套的iframe消息传递4.上面三个问题的跨域数据传递postMessage()这些问题都有一些解决办法,但html5引入的message的API可以更方便、

    HTML5利用约束验证API来检查表单的输入数据的代码实例

    HTML5对于表单有着极大程度的优化,无论是语义,小部件,还是数据格式的验证。我猜你肯定会以浏览器兼容作为借口不愿意使用这些“新功能”,但这绝不应该成为使你停滞不前的原因,况且还有像Modernizr和ployfill这样的工具库帮助你在不支持Html5的浏览器上进行回退处理。当你真正

    详解前端HTML5几种存储方式的总结

    总体情况h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。主要应用:购物车、客户登录对于IE浏览器有UserData,大小是64k,只有IE浏览器支持。目标 解决4k的大小问题 解决请求头常带存储信息的问题 解决关系型存储的问题 跨浏

    HTML5 WebSocket实现多文件同时上传的实例

    在传统的HTTP应用上传文件想要同时上传多个文件并查看上传进度是一件很麻烦的事情,当然现在也有一些基于SWF的文件上传组件提供这种的便利性.到了HTML5下对文件的读取和上传的控制方面就非常灵活,HTML5提供一系列的AIP进行文件读取,包括计取文件某一块的内容也非常方便,结合Websock

    HTML5 CSS3:3D展示商品信息示例

    强化下perspective和transform:translateZ的用法。传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3D元素,~说不定效果不错哈~效果图:说明一下:这个创意不是我想的,哈~模仿别人的,创意应该是w3cplus上的。当然了,重点是教大家如何做,就当高仿了~首先,先教大家利

    HTML5 css3:3D旋转木马效果相册

    这篇博客的目的是因为上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY效果图:嘿嘿,我把大学毕业时的一些照片,做成旋转木马,绕着我大文理旋转,不忘母校的培育之恩~1、perspectiveperspective属性包

    HTML5实现文件断点续传的方法

    HTML5的FILE api,有一个slice方法,可以将BLOB对象进行分割。前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接。断点续传原理目前比较常用的断点续传的方法有两种,一种是通过websocket接口进行文件上传,另

    HTML5 CSS3模仿优酷视频截图功能示例

    一般的视频网站对于用户上传的视频,在用户上传完成后,可以对播放的视频进行截图,然后作为视频的展示图。项目中也可以引入这样的功能给用户一种不错的体验,而不是让用户额外上传一张展示图。效果图:看起来还是很不错,下面我给大家分析下,极其核心代码很简单:_canvas = document.createEleme

    html5 视频播放解决方案

    html5没学习之前总觉的很神秘。近期通过学习和研究html5有点成果,特总结分享给大家。 众所周知应用开发分两种:一是原生的native app 二是web app,也就是通过浏览器访问的应用。 html5在移动互联时代,有他独到的用武之地,虽然他有很多优势但不可能完全彻底取代原生APP,原生APP开发成本虽

    HTML5不支持frameset的两种解决方法

    解决方法如下:第一种使用iframe,但是目前使用iframe的人已经越来越少了,而且iframe在不同浏览器之间还有不兼容的情况。而且我一些研发的人员,他们表示iframe窗口间传值似乎很麻烦。第二种使用jQuery的onload方法加载页面,不过这种方法跳转多个页面后,点击浏览器上方的后退前进是无效的,不

    详解HTML5中的拖放事件(Drag 和 drop)

    浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释:在 Safari 5.1.2 中不支持拖放。HTML5 拖放实例<!DOCTYPE html><html> <head> <style type="text/css"> #div1 {width:488px;height:70px;padding:10px;border:1px solid #

    HTML5制作表格样式

    废话不多说了,具体代码如下所示:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表格</title> <style type="text/css"> *{ margin: 0; padding: 0; }

    HTML5+CSS3制作生日蛋糕(代码易懂)

    废话不多说,先给大家展示下效果图:蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分。HTML的布局结构也是按照这三部分布局的。另外就是使用CSS定位和CSS3的rotate,内外阴影等效果调整部分DOM元素样式。比较简单,相信码农都懂的。不赘述其它有的没的了。下面给出完整的的HTML代码和CSS代码<

    html5 div布局与table布局详解

    本文实例为大家解析了html5 div布局与table布局,供大家参考,具体内容如下div布局:html+css实现简单布局。#container中height不能写成百分数,必须为具体高度。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>div布局</title>

    HTML5拖放效果的实现代码

    拖放拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。注意:Safari 5.1.2不支持拖动.实例:<!DOCTYPE html> <html> <head> <title>拖放</title

    HTML5标签大全

    不允许写结束标记的标签:area(定义图像映射中的区域)、base(为页面上的所有链接规定默认地址或默认目标)、br、col(为表格中一个或多个列定义属性值)、embed(定义嵌入的内容,比如插件--5)、hr、img、input、keygen、link、meta、param、source、track、wbr

    Html5实现用户注册自动校验功能实例代码

    抽时间写了一个带有自动校验功能的Html5用户注册Demo。使用到Handlebars模板技术和手机验证码校验。以下是效果截图:1.页面代码:usersRegister.hbs<!DOCTYPE html> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]> <ht

    HTML5对比HTML4的主要改变和改进总结

    这段时间一直在帮老师做项目比较忙,经常课都没去上,就泡在实验室里,也没什么时间看其他东西了。我在项目中分配到了前端页面设计这一块,有时候浏览网页看到移动端APP和html5最近都比较火的,随着移动互联网快速发展,尤其是4G时代已经来临,加上微软在win10中搭载了新的浏览器edge取代了IE的

    HTML5之语义标签介绍

    HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article、section、nav和aside等。与别的大多数标签不 同,浏览器在解释渲染这些标签的时候仅仅把它作为普通的div块级元素来处理,不会添加任何额外的展现逻辑;也即,这些标签仅用于增添语义。对于Web开 发人员而言,使用这些标签

    HTML5学习心得总结(推荐)

    Html学习总结1.什么是html:HyperTextMarket language,超文本标记语言,是用来描述网页语言,html使用标记标签来描述网页,html不是编程语言,是一种标记语言。2.经历过得版本:HTML2.0、HTML3.2、HTML4.0、HTML4.0.1、HTML53.H5新特性: &bull;用于绘画的 canvas 元素&bull;用于媒介回放的 v

    关于HTML5语义标签的实践(blog页面)

    仿照着用HTML5+CSS3做了一个blog页面。整体效果布局如如:  页面布局是基于html5元素的。所以在开始动手之前先熟悉一下HTML5元素,然后检查它的语义是否适合你的布局很重要。  The HTML5 Structure有一点很重要,当编写HTML5代码的时候,不要简单地把<div>标签用html5中的<section>标

    HTML5进阶段内联标签汇总(小篇)

    内联元素,与别人公用一行,但是设置宽高无效。其特点:①和其他元素都在一行上 ②高,行高及外边距和内边距不可改变; ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素代码如下:<!doctype html> <html lang="en"> <head> <meta

    HTML5 拖放功能实现代码

    HTML5中,拖放是标准的一部分,任何元素都能够拖放,具体内容如下1、拖放 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <sc

    HTML5和CSS3实例教程总结(推荐)

    关于onclick的行为与内容分离 1.通过链接触发弹出窗口方式 (不推荐使用此方法!!!)<a href='#' onclcik = "window.open('holiday_pay.html',WinName,'width=300, height = 300');"> Holiday Pay </a>如果JS被禁用链接无法引导用户进入对应页面,不要为href

    首页上一页12345下一页尾页