基于HTML5 audio元素播放声音jQuery小插件

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠叨在我浮生如梦的大学那会儿,貌似flash网站还有点小火,且大凡有点含量的flash站点上,杂七杂八的音效总是少不了.一部分音效是烘托渲染气氛的背景音乐,另外一部分就是促进互动,增强体验的交互声音,例如按钮按下或者是经过时“哔哔”声或是“叭叭”声.而在那个时候,在远离flash的web页面上鲜有声…

The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQueryplugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio an…

html5网页动画总结--jQuery旋转插件jqueryrotate

CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(filter),但不全面,而且效果和性能都不好. 今天介绍一款 jQuery 插件——jqueryrotate,它可以实现旋转效果.jqueryrotate 支持所有主流浏览器,包括 IE6.如果你想在低版本的 IE 中实现旋转效果,那么 jqueryrotate 是一个很好的选择.兼容性 jqueryr…

基于Bootstrap的超酷jQuery开关按钮插件

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD…

黑色半透明镂空遮罩指引效果实现jQuery小插件

/*! * by zhangxinxu(.com) 2017-05-18 * 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件 * 兼容到IE8+ * MIT使用协议,使用时候保留版权 * 更多原理和使用说明参见:http://www.zhangxinxu.com/wordpress/?p=6171 */ $.guide = function (options) { var defaults = { selector: '', // 页面提示元素选择器物,会使用匹配的第一个元素 c…

【转】基于Bootstrap的超酷jQuery开关按钮插件

基于Bootstrap的超酷jQuery开关按钮插件…

HTML5 audio元素如何使用js与jquery控制其事件

前言: 每一次遇见问题想到的就是怎么解决?最好的方法还是查询网络媒体,更好的办法是让自己记忆,只有自己理解到了才真正是属于自己.要做一个订单提醒功能,没有使用audio相关的插件,虽然插件无数,还是喜欢自己瞎折腾.(来一些隐形的链接,据说有推广效果,本文原创官网地址:www.pushself.com) 听一个写博客的朋友说周末的博客阅读量明显下降,周末大好时光不出去泡妹子的肯定是有难言之隐的.先来重温一下audio标签的基本属性定义和用法 <audio> 标签定义声音,比如音乐或其他音频流.…

[jPlayer] HTML5 Audio & Video for jQuery

----------------------------------------------------------------------------------------------------- The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQueryplugin, (an…

基于Bootstrap的炫酷jQuery slider插件

简要教程这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美化的效果非常好. 安装可以使用npm和bower来安装该slider插件. npm install bootstrap-slider bower install seiyria-bootstrap-slider 使用方法首先要在页面中引入必要的css和js文件. <link href="c…

jquery 小插件，完成“输入字段预期值的提示信息”，防html5 placeholder属性

前言:在很多时候,我们需要文本框中显示默认值,获取焦点时,文字框中就会清空给的值,当失去焦点时,如果没有值,继续显示默认的文字,如果有输入值,就显示输入的值.现在项目中需要用到这个地方的功能比较多,于是想到了HTML5中的placeholder属性,但是总所周知,IE是咋们程序员心中的硬伤,不得不放弃.又不想在网上找这类似的,索性就自己写了一个,现在分享出来,供大家参考! 下面是插件的主要代码: (function ($) { $.fn.Placeholder = function (param…

自己写的自动生成动态边框的jquery小插件

思路就是在元素四周添加<ul>列表,然后周期性地改变它的颜色,实现动态的效果,不支持ie7.ie8 预览链接http://gorey.sinaapp.com/myBorder/border.html html页面代码 <!DOCTYPE html> <html> <meta charset="utf-8"> <head> <style> *{ margin: 0; padding: 0; } ul li{ list…

一款jquery小插件：实现轻松获取和绑定编辑表单的值（带源码）

实现目的:通常在项目中,编辑页面在前后台需要一个一个框赋值,取值操作,小伙伴们普遍都会感觉繁琐,麻烦.: 实现思路:利用json对象化键值的思想: 好处:方便快速开发,提高开发效率,减少重复性代码: 缺点:还不完善,只支持文本框,复选框,下拉框几种控件: 根本原因:纯粹是为了学习与交流: 示例:只要传一个对象即可获得和给下面的控件赋值:…

学习写了一个点击按钮倒计时的jquery小插件

(function($) { $.fn.extend({ getSms: function(value) { value = $.extend({ wait: 60, //参数, 默认60秒 }, value); var id = $(this).attr('id'); var wait = value.wait; //内部函数 function time(id) { console.log(wait); if (wait == 0) { $("#" + id).removeAttr(…

文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件

// 文本框文本域提示文字的自动显示与隐藏 (function($){ $.fn.textRemindAuto = function(options){ options = options || {}; var defaults = { blurColor: "#999", focusColor: "#333", auto: true, chgClass: "" }; var settings = $.extend(defaults,option…

基于html5 canvas 的强大图表插件【Chart.js】

名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可以使canvas兼容到IE5 链接 Chart.js中文网 Chart.js中文文档代码实现第三方引入 <script src="../js/Chart.js?"></script> <!--[if lte IE 8]> <script src…

jQuery自定义插件

jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件, (全局的封装) 3>选择器插件 (类似.find() ) 第三种用的很少,jquery现在封装的很好了,这里我们主要讲的是1和2两种封装对象方法的插件 1.建立js文件,通常是jquery.xxxx.js 2.在文件中写入 /*jQuery测试插件*/ ;(function($){ //添加';'号是…

5款帮助简化的HTML5 Audio开发的Javascript类库

HTML5的audio标签提供了我们方便控制声音的功能,可是使用原生的HTML5来开发声音或者音乐相关的项目仍旧很的麻烦.在今天这篇文章中,我们将介绍5款帮助你简化开发的javascript audio类库,相信合理的使用可以帮助你高效的开发基于html5 audio的应用和项目,希望大家认为有帮助! SoundManager 2 soundmanager2绝对是一个产品级别的javascript audio解决方式.支持HTML5而且兼容老的flash.帮助大家使用一套统一API来实现跨平台(…

第一百七十六节，jQuery，插件

jQuery,插件学习要点: 1.插件概述 2.验证插件 3.自动完成插件 4.自定义插件插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序.目前 jQuery 插件已超过几千种,由来自世界各地的开发者共同编写.验证和完善.而对于 jQuery 开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成本. 一．插件概述插件是以 jQuery 的核心代码为基础,编写出复合一定规范的应用程序.也就是说,插件也是 jQu…

18个基于 HTML5 Canvas 开发的图表库

如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas 元素.HTML 5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.今天,本文收集了一些非常好的基于 HTML 5 Canvas 的图表方案推荐给大家. 1. Visualize Visualize通过Javascript从结构化的HTML表格获取数据并借助HTML5 C…

浮动【电梯】或【回到顶部】小插件：iElevator.js

iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null, btns: null, backtop: null, selected: '', sticky: -1, visible: { isHide: 'no', numShow: 0 }, speed: 400, show: function(me) { me.element.show(); }, h…

9款基于HTML5/SVG/Canvas的折线图表应用

1.华丽的HTML5图表可展示实时数据 HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大.这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势,图表不仅支持多维数据展示,而且支持区域选择数据功能,利用该HTML5图表可以更加方便地管理你的数据. 在线演示源码下载 2.HTML5折线图表Aristochart 图表配置简单利用这些HTML5图表可以很方便的展示各种数据,而且非常直观.今天要向大家分享一款HTML5折线图表插件Aristo…

jQuery html5Validate基于HTML5表单验证插件

更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地点击这里解决了之前组件如下不足: 1. 自定义验证顺序有问题: 2. 即时验证支持没内置: 3. 不能随意定制验证规则: 等等. 今年会开源,大家稍安~ 更新于2016-07-08 又有不少人问了,开源还需要时日.不过大家现在是可以使用的,下面是最简单使用,需要seajs: <script src…

基于jquery的插件turn.js学习笔记

基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it works? 下面是官网展示的最简单的一个应用实例 1.编写html部分 <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard&q…

基于 jQuery Jcrop 插件的功能模块：头像剪裁

/** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使用的 Jcrop 插件,处理方式如图博客园图1: 高度大于宽度时博客园图2: 再看看新浪微博( http://account.weibo.com/set/photo ),它使用的是 flash,如图: 最后看豆瓣( http://www.douban.com/accounts/user_icon…

基于HTML5实现五彩连珠小游戏

今天给大家分享一款基于HTML5实现五彩连珠小游戏.这款游戏的规则:点击彩球移动到期望的位置,每移动一次,画面将随机出现3个新的彩球:当同一颜色的彩球连成5个一行或一列或一斜线时,这5个彩球同时消失,游戏得分10分.当画面上每个方格都被彩球占满时,游戏结束. 在线预览源码下载实现的代码. html代码: <canvas id="canvas" height="400" width="600" style="backgrou…

基于html5 canvas 的客户端异步上传图片的插件，支持客户端压缩图片尺寸

/** * Created by xx on 15-05-28. * 基于html5 canvas 的客户端异步上传画片的插件 * 在实际应用中,常常要用于上传图片的功能．在现在越来越多的手机webapp应用中,上传图片功能的问题尤为实出, * 主要表显为:1 手机摄象头太牛B,随便拍拍,照片都有几M * 2 在没有wifi的情况下,移动网络上线照片还是有点慢的 * 解决以上问题,主要的思路还是在客户端压缩图片尺寸,这就用到这个插件了 * * 插件中的核心代码参照网络,自己整理了一下 * * 使…

帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit

来源:GBin1.com 如果需要在用户滚动页面的时候,保持特定元素始终可见的话,今天这里我们介绍的Sticky-Kit是一个不错的选择. 它是一个开源的jQuery插件,可以帮助大家快速针对页面元素来生成固定页面的效果.往往大家在开发导航栏的时候,需要类似这样的功能. 主要的特性支持多个元素的固定展示支持元素展示的位置及其viewport 使用非常简单,类库非常小如何使用 $("#sticky_item").stick_in_parent() 或者 $("#stick…

基于HTML5 Canvas和jQuery 的绘图工具的实现

简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成品: 该应用是遵循所见即所得(WYSIWYG, What you see is what you get)原则设计的,它具有下面功能: 1. 能够绘制自由曲线.直线.矩形框和文字. 2. 能够依据须要定义线段和矩形框的颜色和宽度: 3. 你能够须要字体的大小.颜色.字体: 4. 支持undo.red…

基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jquery fly插件实现加入购物车抛物线动画效果.使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能一.插件下载插件官方:https://github.com/amibug/fly 二.载入jQuery库文件和jquery.fly.min.js插件 <script src="j…

基于JQuery.timer插件实现一个计时器

基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下. 先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: <script src="../Javascripts/Plugins/jquery.timers-1.2.js" type="text/javascript"></script> 然后是HTML,我们可以放一个hidden 的server cont…

【基于HTML5 audio元素播放声音jQuery小插件】的更多相关文章