什么是封装呢? 我的理解就是 把一个功能单独做成一个组件,就像做饺子,以前做饺子必须自己先用面粉做饺子皮,再做饺子馅,然后再手工包饺子,但是现在人们发明了自动包饺子机器,虽然机器里面的每一步骤和你自己包饺子是一样的,但是实际上你现在需要做的就只有一件事,就是放原料.这边机器就是封装好的插件,而原料就是你要传的参数 为什么要把js功能封装成插件呢?我觉得有以下几点吧 1.便于代码复用 2.避免各个相同功能组件的干扰,可能会有作用域的一些问题 3.便于维护,同时利于项目积累 4.不觉得一直复制粘贴很…

1.backstretch背景图片插件 可实现背景自适应效果 <script src="dist/js/lib/backstretch/jquery.backstretch.min.js"></script> $("body").backstretch("dist/img/background_index.png"); 2.滚动条插件 <script src="dist/js/lib/nicescroll/…

toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成JS,非常的方便使用. 使用demo地址:http://www.jq22.com/yanshi476(可获取toastr不同的配置方式) 1.兼容性 2.toastr使用 引入核心文件 <span style="font-family:Comic Sans MS;"> <…

<ul class="list"> <li>导航列表 <ul class="nav"> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> </ul>…

fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js. fullPage.js的主要功能有:支持鼠标滚动.支持前进后退和键盘控制.多个回调函数.支持手机.平板触摸事件.支持 CSS3 动画.支持窗口缩放.窗口缩放时自动调整.可设置滚动宽度.背…

Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+,火狐,Chrome,Opera 和 Safari 浏览器. 马上去试试 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载]…

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

css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} .section2 p { position: relative; left: -%;} .section3 p { position: relative; bottom: -%;} .section4 p { display: none;} &…

Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 swipe 事件,箭头和子弹导航,键盘导航,公共 API 回调,自动播放和悬停暂停功能. 您可能感兴趣的相关文章 OverAPI.com – 史上最全开发人员在线速查手册 jQuery Flat Shadow – 轻松实现漂亮长阴影效果 SlimerJS – Web开发人员可编写 JS 控制的浏览器…

jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jquery-1.4.2.min.js和jquery.validate.min.js. 下面演示如何使用jquery.validate.js插件进行表单的验证. 这是HTML表单:<form id="regFrom" name="regFrom"><inp…

作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例讲解应用.it's perfect. 首先记录一些使用过程中,爱犯的错误: 1>忘记给表单form添加id属性 2>input这些表单标签必须id属性和name属性名字一样.例如:<input type="text" id="name" name=&q…

AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audioplayer.js 你可以在右键点击上面的地址,然后选择另存为把JS文件保存到本地. 英文原文地址:http://osvaldas.info/audio-player…

jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小.尺寸.颜色以及众多参数自定义,非常不错,推荐大家使用. 官网地址:https://github.com/kujian/jQuery-slimScrollCND:http://cdn.bootcss.com/jQuery-slimScroll/1.3.6/jquery.slimscroll.min.…

移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO1,加载底部 DEMO2,加载顶部.底部 DEMO3,固定布局,加载顶部.底部 使用方法 引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> <script src=&quo…

Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为. 使用jQuery BlockUI,首先需要在jQuery后面引用 jquery.blockUI.js jquery.blockUI.js插件下载地址:http://jquery.malsup.com/block/ 用法很简单,组织用户对页面的交互: $.…

插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js <script t…

基于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动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <h1> Velocity.js <i>slice + sequence</i></h1> <pre>Only anim X number with FX#1, animate Y number with FX#2 etc…

效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒   1.前端   首先html的head中引入相关css与js <link rel="stylesheet" href="/css/page.css" /> <script type="text/javascript" src="/js/jquery.min.js"></scr…

toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置.toastr需要jquery的支持.今天我们就开始toastr的学习. jquery通知插件toastr的使用 一.引入jquery库和toastr的核心文件: toastr的下载地址: http://codeseven.github.io/toastr/. jquery的下载地址:http://jquery.com/downl…

jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e…

Jquery放大镜插件imgzoom能够实现图片放大的功能,便于与原图进行比较. 使用方法: 1.引入jQuery与imgzoom,imgzoom.css <link rel="stylesheet" href="css/jquery.imgzoom.css" /> <script type="text/javascript" src="src/jquery-1.11.0.js" ></scrip…

注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/14/1203/08/19812575_430009823.shtml 融合 演示链接:http://www.51xuediannao.com/demo.php 简介 fullPage.js是一个基于jquery的插件,它能轻松制作出全屏网站,主要功能有: 1.支持鼠标滚动 2.支持前进后退和键盘控…

delaycall.js delaycall 是一个 jQuery / Zepto 插件,用于在用户完成某项操作后,延迟指定秒数后自动调动指定函数.如用户输入完内容后,延迟1秒,自动提交表单. GitHub Repository https://github.com/yzchen0o0/delaycall git@OSC Repository http://git.oschina.net/cyzshenzhen/delaycall Demo 点击查看在线演示地址 Quick Start Guid…

经过查阅资料zepto 和 jquery 的区别后发现是 (1)zepto.js  删去了 jquery 的 innerHeight() 和 innerWidth() 属性  (2)zepto.js和jquery 的事件驱动不一样 所以 用编辑器打开jquery.shCircleLoader.min.js 将 开始的 (function($) { ...  })(window.jQuery); 替换为 Zepto(function($) { ...});   然后使用crtl+f 搜索关键词  …

利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 , 不仅仅只显示一行文本. 2 . 弹出层可以拖动 , 这样不会遮挡后面的内容. 效果见下图 : 需要文件 : Jquery.js 1.6 以上版本 Jquery.blockUI.js  官网下载 支持拖动的四个JqueryUI文件 : jquery.ui.core.js  ,jquery.ui.w…

jquery.corner.js可以实现各种块级元素的角效果,以下为演示,详见jquery_corner.html中的注释部分,并附百度盘下载 jquery_corner.html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&qu…

码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14577243.html 目录 码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14577243.html Script 标签 CommonJS规范(同步加载模块) 创建模块 加载模块 导出模块 CommonJS 特点 AMD(Asynchronous Module Definition) 创建模块 加载规范模块 加载非规范的模块…

在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery-3.1.0.min'); $('#name').html('helloworld'); }) 会报错,提示$ is not a function: 原因在于jQuery是默认支持AMD规范的,而sea.js是遵循CMD规范进行加载:这两种规范对外提供模块时的定义方法不一样: // CMD defi…

 版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2.使用$.extend(obj) 3.使用命名空间 类级别开发插件(用的非常少,1%) 分别举例: //1.直接给jquer添加全局函数 jQuery.myAlert=function (str) { alert(str); }; //2.用extend()方法.extend是jquery提供的一个…