标签：flow def bre 文件命名 提示 ble 20px mouseover 实现
前 言
絮叨絮叨
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
那么这次，我就和大家来分享一下JQuery中的一个强大的功能——自定义插件。当我们在去实现一个小功能的时候，比如说banner图的滚动，插件的使用会让我们省去大量的代码。那又当我们会经常使用一个功能然而又懒得每次都去写怎么办？那当然就需要我们自己写一个属于自己的插件，用的时候直接拿我们自定义的插件用就可以了。
| JQuery插件类型 |
$.fn.setBgColor = function(bgColor){
//在$.fn声明的插件函数中，可以使用this代指调用这个插件的对象节点。
//而且this是一个JQUery对象
bgColor = bgColor? bgColor:"#ccc"; //设置背景色的默认值
this.css("background-color",bgColor);
}
$("#div1").setBgColor("red");
$.extend({
func : function(){} //func --> 插件名
});
| JQuery自定义插件要点 |
| banner图的滚动实例 |
html代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义插件实现banner滚动</title> <script src="js/jquery-3.1.1.js" type="text/javascript"></script> <!--导入JQuery--> <script src="js/jquery.scrollBanner.js" type="text/javascript"></script> <!--导入自定义插件 “jquery.scrollBanner.js”--> </head> <body> <div id="banner"> </div> <script type="text/javascript"> $("#banner").scrollBanner({ images : [ {src:"img/banner11.png",title:"banner1",href:"http://www.baidu.com"}, {src:"img/banner22.png",title:"banner2",href:"http://www.sina.com"}, {src:"img/banner33.png",title:"banner3",href:"http://www.qq.com"}, {src:"img/banner44.png",title:"banner4",href:"http://www.zealer.com"}, ] }); </script> </body> </html>
自定义插件代码
/* 该插件实现了Banner图的滚动效果。 * * 一、插件的属性： * images : 接受数组类型，数组的每个值应为对象。对象具有属性： src->图片的路径 title->图片指上后的文字 href->点击图片跳转的页面 * * scrollTime : 每张图片的停留时间，单位毫秒。 2000 * bannerHeight : Banner图的高度. 500px * * iconColor : 提示图标的颜色。默认 white * iconHoverColor : 提示图标指上之后的颜色。 默认 orange * iconPosition : 提示图标的位置，可选值left/center/right。 默认center * */ !function($){ $.fn.scrollBanner = function(obj){ // 声明各个属性的默认值 var defaults = { images : [], scrollTime : 2000, bannerHeight : "500px", iconColor : "white", iconHoverColor : "black", iconPosition : "center", } // 将默认值与传入的对象比对，如果传入的对象有未赋值属性，则使用默认对象的属性 obj = $.extend(defaults,obj);
// 组建DOM布局 $("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 class=‘scrollBanner-icon‘ data-index=‘"+index+"‘></span>"); }); //设置各种css this.css({ "width" : "100%", "height" : obj.bannerHeight, "overflow" : "hidden", "position" : "relative", }); $(".scrollBanner-banner").css({ "width" : obj.images.length +1+"00%", "height" : obj.bannerHeight, }); $(".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-icons").css({ "width": 35*obj.images.length+"px", "height": "7px", "position" : "absolute", "bottom" : "40px", // "left" : "0px", "z-index": "100", }); switch (obj.iconPosition){ case "left": $(".scrollBanner-icons").css({ "left" : "40px", }); break; case "right": $(".scrollBanner-icons").css({ "right" : "40px", }); break; case "center": $(".scrollBanner-icons").css({ "left" : "50%", "margin-left" : "-"+15*obj.images.length+"px", }); break; } $(".scrollBanner-icon").css({ "width": "20px", "height": "7px", "background-color": obj.iconColor, "display": "inline-block", "margin": "0px 5px", }); $(".scrollBanner-icon:eq(0)").css({ "background-color":obj.iconHoverColor, }); //实现Banner滚动功能 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图 $(".scrollBanner-icon").mouseover(function(){ $(".scrollBanner-icon").css("background-color",obj.iconColor); //↓由span触发mouseover事件，则this指向这个span。 //↓但是，这this是JS对象，必须使用$封装成JQuery对象。 $(this).css("background-color",obj.iconHoverColor); // console.log($(this).attr("data-index")); var index = $(this).attr("data-index"); count = index;//将计数器count修改为index的值，让banner滚动的定时器能够刚好滚到所指图片的下一张。 $(".scrollBanner-banner").css({ "transition" : "none", "margin-left" : "-"+index+"00%", }); }); } }(jQuery);
效果图如下：
标签：flow def bre 文件命名 提示 ble 20px mouseover 实现
原文地址：http://www.cnblogs.com/realsdg/p/7587160.html
