jq-signature.js是一个帮助你创建签名的jQuery插件，允许你的用户使用鼠标，手指或者铅笔生成签名。下面这篇文章主要给大家介绍了利用html5+canvas实现支持触屏的签名插件的相关资料，需要的朋友可以参考下。前言大家在日常开发中使用该jQuery插件来制作在线签名，用户绘制的东西以图片的形式保存下来，非常方便实用。下面将实现支持的方法分享给大家，供大家参考学习，下面来一起看看详细的介绍吧。方法如下：使用该签名插件要引入...
本篇文章主要介绍了HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量），现在html5提供了API以及File，FileReader，XMLHttpRequest等强大的API，为我们拖放实现上传提供了可能。有兴趣的可以了解一下。上传基本是项目中经常出现的，一般采用：1、form提交2、flash3、HTML5form提交会刷新页面，很难做到异步上传；flash可能是用得比较多了，因为可以兼顾到几乎所有的浏览器，我之前一直会用jQuery的uploadify作为项目中的上传工具...
现在的Web页面已经越来越走向高端化和易操作化，jQuery的大量应用，让Web开发者更容易驾驭前端页面的控制，HTML5的引入也更让网站页面的元素生动富有活力。本文主要向大家分享一些可以让页面更加引人注目的HTML5/jQuery动画插件，作为设计参考。1、HTML5 Canvas实现会跳舞的时间动画这款HTML5动画非常有意思，首先它的原型是一个时钟，但是canvas技术的使用，让这个时钟没走动一秒都会产生圆球散落的动画特效，非常的酷。在线演示源...
音频与视频现在已经变得越来越流行 各个网站为了保证跨浏览器的兼容性 仍然选择使用flash（源码截自优酷）多媒体标签使用HTML5增加了audio与video两个多媒体标签 兼容性还不错，低版本IE不支持 可以使我们不需要使用任何浏览器插件就能够插入音频与视频控件 而且非常的简单（源码截自Bilibili）元素用法如下:<audio src="media/xi-Halcyon.mp3" id="demoAudio">不支持H5-audio</audio> <video src="media/Animation.mp4" id="demoV...
HTML5/CSS3 经典案例-无插件拖拽上传图片（一）：上传基本是项目中经常出现的，一般采用：1、form提交 2、flash3、html5form提交会刷新页面，很难做到异步上传；flash可能是用得比较多了，因为可以兼顾到几乎所有的浏览器，我之前一直会用jquery的uploadify作为项目中的上传工具，uploadify也有基于html5好像是收费的，大家可以去官网看看；当然了，现在html5提供了API以及File，FileReader，XMLHttpRequest等强大的API，为我们拖放...
上一篇已经实现了这个项目的整体的HTML和CSS：HTML5/CSS3 经典案例-无插件拖拽上传图片（一）这篇博客直接在上篇的基础上完成，最终效果：效果图1：效果图2：好了，请允许我把图片贴了两遍，方便大家看效果了~可以看出我们的图片的li的html其实还是挺复杂的，于是我把html文档做了一些修改：<span style="font-size:12px;"><body><p id="uploadBox"> </p><p id="template" class="hidden"><li><img src=""/><span class="progress"...
jQuery是一个当前依然非常流行的Web前端JavaScript框架，这次我们要分享的就是基于jQuery的日历时钟插件，部分日历插件还是基于HTML5技术实现的，因此动画效果都还不错。有兴趣的朋友可以接下去看看。1、jQuery多功能日历插件 带事件记录功能这款jQuery日历插件的一大特点就是可以在每一个日期后面记录事件，并且可以设置提醒时间，如果你对JS开发比较擅长，还可以将它改进成一款即时提醒的APP应用。在线演示源码下载2、华丽的HTML...
基于HTML5的应用现在已经非常广泛，今天我们就来向大家分享20款非常绚丽的HTML5/CSS3应用插件。希望大家喜欢并分享给你的好友们。1、HTML5视频破碎重组特效 强大视觉冲击HTML5视频播放器很多，但是HTML5视频特效还是很少见的，这款HTML5视频破碎重组特效非常刺激，给人强大的视觉冲击。点击视频任意地方，HTML5将会将这些区域击碎，过一段时间，这些被击碎的视频碎片又将自动重新组合。是一款非常不错的HTML5视频特效。在线演示 ...
现在我们经常会用到一些地图应用，无论是在网页上还是手机App中，地图貌似是一个不可或缺的应用。本文将带领大家一起来看看一些基于jQuery和HTML5的个性化地图插件，有几款地图比较实用，有些则是具有抽象的概念，很有个性化。1、HTML5世界地图 划分世界区域并显示国家名这是一款基于HTML5的世界地图应用，它的特点是可以将地图中的各个国家区域进行划分，鼠标滑过时即可显示该区域对应的国家名称，你也可以对弹出的标签进行自定义...
经过前两部分的讲解，我们大概知道内容滑动切换的基本开发思路和技巧，现在我们在第三部分将前面两部分的代码进行优化，封装成一个jQuery插件：jquery.hwSlide.js。开发者可以轻松创建各种图片轮播效果、焦点图效果、图文混排滑动效果。查看演示 下载源码hwSlider具有以下特性：多个参数定制，满足不同项目需求。 支持移动端触控滑动。 支持图文混排，支持各种html元素。 响应式自适应屏幕尺寸。 同一页面支持多个滑动...
现在在手机客户端上Action Sheet非常常见，比如微信中的分享按钮菜单，下面我们使用jqMobi实现一个Action Sheet，如下：首先右击上面的按钮选择审查元素（我用的是Chrome浏览器，先按F12）<a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheet</a>然后Ctrl + F查找 showCustomHtmlSheet()方法代码贴出如下： function showCustomHtmlSheet() {$("#afui").actionsheet(<a >Back</a><a onclick="alert(\hi...
在上一篇中我们学会了ActionSheet的使用，细心的朋友可能会发现其中创建列表的格式是HTML的，代码如下：function showCustomHtmlSheet() {$("#afui").actionsheet(<a >Back</a><a onclick="alert(\hi\);" >Show Alert 3</a><a onclick="alert(\goodbye\);">Show Alert 4</a>); }这一篇我们来研究一下json格式的ActionSheet,其实很简单，和上一篇中的分析方法一样，我们先找到实例代码中的源代码如下：<a class="button" onclick...
简要教程svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件。该3D标签云插件不需要额外的CSS样式，可使用鼠标与标签进行互动，并提供很多参数来控制标签云的外观。使用方法使用该3D标签云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。<script src="js/jquery.min.js"></script> <script src="js/jquery.svg3dtagcloud.min.js"></script> HTML结构可以使用一个<div>容器来作为该3D标签云的包裹容器。<div id="tag...
简要教程easyNotify是一款基于HTML5 Notifications API的消息通知jQuery插件。该jQuery插件简单的利用HTML5 API来在桌面右下角显示自定义的通知消息。该插件需要浏览器支持HTML5 Notifications API，浏览器的兼容性如下：使用方法在页面中引入jquery和easyNotify.js文件。<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/easyNotify.js"></script>显示消息通知该消息通知...
简要教程colorizer是一款可以创建黑胶唱片风格音频播放器的jQuery插件。该插件通过jQuery来驱动音频的播放，并使用CSS3来制作唱片机的动画特效。 使用方法在页面中引入jquery和colorizer.js文件。<script src="path/to/jquery.min.js"></script> <script src="path/to/colorizer.js"></script>HTML结构使用下面的HTML结构来构建一个唱片机播放器。<div class="audio"><div class="echolizer"></div><div class="colorizer"></div><...