前 言
JRedu
学习之前,首先我们需要知道什么是JQuery?
JQuery是一个优秀的javascript框架。
JQuery是继Prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库,这是其它的js库所不及的,它兼容CSS3,还兼容各种常用浏览器。
JQuery是一个快速的,简洁的JavaScript库,使用户能更方便地处理html documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
JQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。JQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。进行插件开发前,首先要知道两个问题:什么是
- jQuery
插件?
- jQuery
插件如何使用?第一个问题,
- jQuery
插件就是用来扩展
- jQuery
原型对象的一个方法,简单来说就是
- jQuery
插件是
- jQuery
对象的一个方法。其实回答了第一个问题,也就知道第二个问题的答案了,
- jQuery
插件的使用方式就是
- jQuery
对象方法的调用。
- jQuery
JQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件,并且用JQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。
1、自定义插件的基础知识 |
插件分为两类。
一类叫做全局插件,另一种叫做局部插件。从名字我们就可以了解到两者的区别。
全局插件是作用于整个文档的插件。
局部插件是作用于某一块区域的插件。
1.全局插件的声明
- $.extend({func: function() {} // func-->插件名
- })
调用方式和函数类似
- $.func();
2.局部插件的声明
- $.fn.func = function() {}
调用方式有所不同
- $("选择器").func();
2、 自定义插件的准备工作 |
该插件实现了Banner图的滚动效果。
插件具有以下属性:
images : 接受数组类型,数组的每个值应为对象。对象具有属性: src->图片的路径 title->图片指上后的文字 href->点击图片跳转的页面
scrollTime : 滚动时间,单位毫秒。 5000
bannerHeight : Banner图的高度. 500px
iconColor : 提示图标的颜色。默认 white
iconHoverColor : 提示图标指上之后的颜色。 默认 orange
iconPosition : 提示图标的位置,可选值left/center/right。 默认center
首先,我们需要新建一个HTML文件和一个JS文件。
然后将JS文件和JQuery文件导入进来。
然后新建一个空div。
- <div id="banner">
- </div>
用JQuery导入几张图片
- <script type="text/javascript">
- $("#banner").scrollBanner({
- images : [
- {src:"img/banner1.jpg",href:"http://www.baidu.com"},
- {src:"img/banner2.jpg",href:"http://www.sina.com"},
- {src:"img/banner3.jpg",href:"http://www.qq.com"},
- {src:"img/banner4.jpg",href:"http://www.jredu100.com"},
- ],
- });
- </script>
这样基本的准备工作就完成了,接下来就是插件的实现了。
3、 自定义插件的制作 |
这是一个十分实用,使用起来也非常简单的banner图滚动插件。
首先创建一个作用于div的局部插件,然后设置属性默认值
- $.fn.scrollBanner = function(obj) {
- // 声明各个属性的默认值
- var defaults = {
- images: [],
- scrollTime: 2000,
- bannerHeight: "500px",
- iconColor: "white",
- iconHoverColor: "orange",
- iconPosition: "center"
- }
- // 将默认值与传入的对象比对,如果传入的对象有未赋值属性,则使用默认对象的属性
- obj = $.extend(defaults, obj);
- }
后面的代码全部写入这个函数中。
这是一个比较清晰的过程,直接用代码展示给大家。
- $("body").css({
- "padding": "0px",
- "margin": "0px"
- });
- this.empty().append("<div class='scrollBanner-banner'></div>");
- $.each(obj.images,
- function(index, item) {
- $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='" + item.href + "' target='_black'><img src='" + item.src + "' title='" + item.title + "' /></a></div>");
- });
- $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='" + obj.images[0].href + "' target='_black'><img src='" + obj.images[0].src + "' title='" + obj.images[0].title + "' /></a></div>");
- this.append("<div class='scrollBanner-icons'></div>") $.each(obj.images,
- function(index, item) {
- // data-*属性 :是H5允许用户自行在HTML标签上保存数据的属性。
- // 保存在data-*中的数据,可以使用JS读取调用。
- $(".scrollBanner-icons").append("<span data-index=" + index + " class='scrollBanner-icon'></span>");
- });
- $(".scrollBanner-icons").css({
- "width": 25 * obj.images.length + "px",
- "height": "5px",
- "position": "absolute",
- "bottom": "40px",
- "left": "0px",
- "z-index": "100",
- });
- switch (obj.iconPosition) {
- case "left":
- $(".scrollBanner-icons").css({
- "left":
- "50px",
- });
- break;
- case "right":
- $(".scrollBanner-icons").css({
- "right":
- "50px",
- });
- break;
- case "center":
- $(".scrollBanner-icons").css({
- "left":
- "50%",
- "margin-left": "-" + 12.5 * obj.images.length + "px"
- });
- break;
- }
- $(".scrollBanner-icon").css({
- "width": "15px",
- "height": "5px",
- "background-color": obj.iconColor,
- "display": "inline-block",
- "margin": "0px 5px",
- });
通过一段代码,进行简单的CSS设置。
- this.css({
- "width":"100%",
- "height":obj.bannerHeight,
- "overflow":"hidden",
- "position":"relative"
- })
- $(".scrollBanner-banner").css({
- "width":obj.images.length+1+"00%",
- "height":obj.bannerHeight,
- "transtition":"all .5s ease"
- })
- $(".scrollBanner-bannerInner").css({
- "width":100/(obj.images.length+1)+"%",
- "height":obj.bannerHeight,
- "overflow":"hidden",
- "float":"left"
- })
- $(".scrollBanner-bannerInner img").css({
- "width":"1920px",
- "height":obj.bannerHeight,
- "position":"relative",
- "left":"50%",
- "margin-left":"-960px"
- })
- $(".scrollBanner-icon:eq(0)").css("background-color", obj.iconHoverColor);
实现banner图的不停滚动,基本原理是利用定时器。
然后不停改变最外面大div的margin-left属性,改变显示在屏幕上的图片,再加上适当的动画效果,形成滚动。
最后通过设定好的参数变量,修改滚动的速度。
同样的,附上一段代码。
- var count = 1;
- var icons = $(".scrollBanner-icon");
- setInterval(function() {
- $(".scrollBanner-banner").css({
- "margin-left": "-" + count + "00%",
- "transition": "all .5s ease"
- });
- $(".scrollBanner-icon").css("background-color", obj.iconColor);
- $(".scrollBanner-icon:eq(" + count + ")").css("background-color", obj.iconHoverColor);
- if (count >= obj.images.length) {
- $(".scrollBanner-icon:eq(0)").css("background-color", obj.iconHoverColor);
- }
- if (count > obj.images.length) {
- count = 0;
- $(".scrollBanner-banner").css({
- "margin-left": "0px",
- "transition": "none"
- });
- }
- count++;
- },
- obj.scrollTime);
这样之后,banner图就可以自动滚动了,可是一个只能不停滚动的banner图,可能并不符合我们的预期。
我们更想要的是一个可以随意切换自己想要的图片的效果。
我们顺带做一个图片指上导航小图标,不仅切换图片,还让小图标变色的效果。
原理如下:
- // 小图标指上以后变色并且切换banner图
- $(".scrollBanner-icon").mouseover(function() {
- $(".scrollBanner-icon").css("background-color", obj.iconColor);
- // 由span触发mouseover事件,则this指向这个span。
- // 但是,这this是JS对象,必须使用$封装成JQuery对象。
- $(this).css("background-color", obj.iconHoverColor);
- var index = $(this).attr("data-index");
- count = index; // 将计数器count修改为index的值,让Banner滚动的定时器能够刚好滚到所指图片的下一张。
- $(".scrollBanner-banner").css({
- "transition": "none",
- "margin-left": "-" + index + "00%",
- });
- })
这样,一个非常好用的banner图滚动插件就完成了。
当我们使用的时候,只需新建一个div,起好ID,然后用JS将需要滚动的图片导入即可。
这便是制作一个小插件的基本原理和思路了,希望能帮助到一些初学者。
之后会陆续更新这一系列,给大家带来更多的实用小技巧。
希望大家多多批评指正。
来源: http://www.cnblogs.com/lihaohai/p/7530758.html