JS_自己写的JQ插件
看了<<锋利的jQuery>>之后,受益匪浅,特别是有关代码风格方面的内容.
于是想把以前写的一些JQ插件整理一下,以留备用...(里面也有一些书中的例子,我也放进去了)
其它的也会陆续添加进来~~~
/** * @objMethod - jQuery扩展对象方法 * 注意 : jQuery插件,必须引入jQuery * 最后修改: (20091010) * author : Yan.Gf * email : yan-guofeng@126.com * 内容 : color - 读取或设置颜色 * alterBgColor - 设置表格交替样式及hover格式 * waterMark - 文本框的水印效果 * floatMenuEffect - 一个浮动菜单特效 * shining - 元素闪烁效果 * positionMove - 让元素按数组数据进行定位移动 * quiver - 让元素产生抖动效果(需要positionMove) */ ;(function($) { $.fn.extend({ "color" : function(value){ return this.css("color",value); }, "alterBgColor" : function(options){ options = $.extend({ odd :"odd", //odd line class name even :"even", //even line class name hover:"hover", //mouse hover class name click:"click" },options); $("tbody>tr:odd",this).addClass(options.odd); $("tbody>tr:even",this).addClass(options.even); $("tbody>tr",this).hover( function(){ $(this).addClass(options.hover);}, function(){ $(this).removeClass(options.hover);} ); $("tbody>tr",this).toggle( function(){ $(this).addClass(options.click);}, function(){ $(this).removeClass(options.click);} ) } , "waterMark" : function(options){ options = $.extend({ colorMark : "#000", //水印文字的颜色 colorEnter : "#000", //输入内容的颜色 text : "text" //水印文字的内容 },options); $(this) .val(options.text) .css("color",options.colorMark) .focus(function(){ if( $(this).val() == options.text){ $(this).val("").css("color",options.colorEnter); } }) .blur(function(){ if( $.trim($(this).val()) == "" ){ $(this).val(options.text).css("color",options.colorMark) } }) }, "floatMenuEffect" : function(options){ options = $.extend({ space : 5, //菜单之间间距 posX : 200, //浮动后X方向位置 posY : 200, //浮动后Y方向位置 time_upDown : 300, //菜单伸缩时间 time_float : 500 //菜单浮动时间 },options); var h_li = $("li",this).height(); //li元素的高度 $("li",this).each(function(i){ //定位每个li元素 $(this).css("top",i * ( h_li + options.space ) + "px"); }); $(this).find("li").toggle( function(){ $(this) .data("top",$(this).position().top) //保存原位置top .data("left",$(this).position().left) //保存原位置left .animate({height:"0px"},options.time_upDown) .animate({left: options.posX + "px",top:options.posY + "px"},options.time_float) .animate({height:h_li + $(this).find("span").height() + "px"}); //修改li元素高度为原高度+span元素高度,使内容显示 }, function(){ $(this) .animate({height:"0px"},options.time_upDown) .animate({left:$(this).data("left")+"px",top:$(this).data("top")+"px"}) .animate({height:h_li + "px"}); } ) }, shining : function(options){ options = $.extend({ opacity_t : 0.1, //变化后透明度 opacity_f : 1 , //原始透明度 timer : 1000, //变化时间(一次循环) state : 1 //状态:1-鼠标over暂停;2-鼠标over开始;3-一直闪烁 },options); var that = $(this); var f = function(){ that .fadeTo(options.timer/2 , options.opacity_t) .fadeTo(options.timer/2 , options.opacity_f); } switch(options.state) { case 1 : var s = setInterval(function(){f()} ,options.timer); that.hover( function(){clearInterval(s);}, function(){s = setInterval(function(){f()} ,options.timer);}); break; case 2 : that.hover( function(){s = setInterval(function(){f()} ,options.timer);}, function(){clearInterval(s);} ); break; case 3 : var s = setInterval(function(){f()} ,options.timer); break; } }, posMove : function(options){ options = $.extend({ speed : 1000, step : [], unit : "px" },options) $(this).css("position","relative"); var getPosX, getPosY; for(var i=0; i<options.step.length; i++){ getPosX = "+=" + options.step[i][1] + options.unit; getPosY = "+=" + options.step[i][1] + options.unit; switch(options.step[i][0]){ case "l": $(this).animate({left:getPosX},options.speed);break; case "t": $(this).animate({top:getPosY},options.speed);break; case "lt":$(this).animate({left:getPosX,top:getPosY},options.speed);break; default:""; } } }, quiver : function(options){ options = $.extend({ speed : 10, pos : 2, n : 4 },options); var arr = [ ["l",options.pos], ["t",options.pos], ["l",-(options.pos)], ["t",-(options.pos)] ]; for(var i=0; i<options.n; i++){ $(this).posMove({speed:options.speed,step:arr}); } } }); })(jQuery);
测试插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery objMethod</title>
<script type="text/javascript" src="../jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="jquery.objMethod.js" ></script>
</head>
<style>
body { margin:0; padding:0;}
.box { border:3px solid #69F; width:70%; margin:0 auto; margin-bottom:15px;}
.box .hd { border-bottom:1px solid #69F; background:#CCC; color:#000; font-size:12px;
margin-bottom:10px; padding:5px;}
.box .bd { /*font-size:12px;*/ text-align:center;}
.clear { clear:both;}
</style>
<body>
<!--
<div class="box">
<div class="hd"></div>
<div class="bd"></div>
</div>
-->
<div class="box">
<div class="hd">
alterBgColor - 设置表格交替样式及hover格式
</div>
<div class="bd">
<style type="text/css">
.even { background-color:#CFC}
.odd { background-color:#3FF;}
.hover { background-color:yellow;}
.click { background-color:#ccc;}
</style>
<table id="alterTb">
<tbody>
<tr>
<td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td>
</tr>
<tr>
<td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td>
</tr>
<tr>
<td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box">
<div class="hd">waterMark - 文本框的水印效果</div>
<div class="bd">
<input type="textbox" id="t1"><br />
<input type="textbox" id="t2"><br />
<input type="textbox" id="t3">
</div>
</div>
<div class="box">
<div class="hd">floatMenuEffect - 一个浮动菜单特效</div>
<div class="bd" style="height:320px;">
<style type="text/css">
ul#floatMenu { margin:0; padding:0;position:relative; width:102px;}
ul#floatMenu li { height:30px; width:100px; line-height:30px; position:absolute; left:0;
border:1px solid #ccc; text-align:center; list-style:none; overflow:hidden;
background:#9FF; cursor:pointer;}
ul#floatMenu li span { display:block; background-color:#9FF; height:100px;}
</style>
<ul id="floatMenu">
<li>
h1
<span>this is h1<br />
feajlf;j;ae<br />
fejioa;fjaoifjeai<br />
</span>
</li>
<li>h2
<span>this is h2</span>
</li>
<li>h3
<span>this is h3</span>
</li>
<li>h4
<span>this is h4</span>
</li>
<li>h5
<span>this is h5</span>
</li>
<li>h6
<span>this is h6</span>
</li>
<li>h7
<span>this is h7</span>
</li>
<li>h8
<span>this is h8</span>
</li>
<li>h9
<span>this is h9</span>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="box">
<div class="hd">shining - </div>
<div class="bd">
<img src="http://www.baidu.com/img/baidu_logo.gif" alt="" id="shimg1"/><br />
<img src="http://www.baidu.com/img/baidu_logo.gif" alt="" id="shimg2"/><br />
<img src="http://www.baidu.com/img/baidu_logo.gif" alt="" id="shimg3"/><br />
<p id="shi_p">this is a p</p>
</div>
</div>
<div class="box">
<div class="hd">posMove - </div>
<div class="bd">
<style type="text/css">
#m1,#m2 { width:30px; height:30px; border:1px solid #ccc; margin-bottom:20px; color:#ccc;}
</style>
<div id="m1">m1</div> <div id="m2">m2</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function dw(s){ document.writeln(s + "<br />");}
$(function(){
//alterBgColor
$("table").alterBgColor();
//waterMark
$("#t1").waterMark({text:"what"});
$("#t2").waterMark({text:"what",colorMark:"#CCC"});
$("#t3").waterMark({text:"what",colorMark:"blue",colorEnter:"blue"});
//floatMenuEffect
$("ul#floatMenu").floatMenuEffect({posY:20});
//
$("#shimg1").shining({state:1});
$("#shimg2").shining({state:2});
$("#shimg3").shining({state:3});
$("#shi_p").shining();
//
$("#m1").mouseover(function(){
var arr1 = [["l",5],["t",5]];
$(this).posMove({speed:100,step:arr1});
});
$("#m2").mouseover(function(){
$(this).quiver();
})
})
</script>
JS_自己写的JQ插件相关推荐
- jq插件的编写方法（自定义jq插件）
jq插件用起来很方便,给客户端的编程带来很大的好处,节省大量的开发时间 我用Jq也有好长时间了,今天在一个项目中用一个插件的时候,忽然感觉这个插件有一个bug 这让我心生了自己写一个jq插件的想法 下 ...
- html5 div拖拽插件,div拖拽插件——JQ.MoveBox.js(自制JQ插件)
有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧. 这一周空闲的时间学着自己写一下JQ插件. 以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ ...
- jq插件处女座 图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...
- 【传智播客郑州校区分享】JQ插件机制
JQ插件概述 所谓的jquery插件,其实就是利用jquery语法,完成的一些工具或者模块.jquery插件是jQuery功能的扩展.可以让开发人员能更好更快速的完成某些特定的需求,只需要用很少的代码 ...
- jq插件的基础知识，以及小demo
什么是插件 ,jq插件,优点,缺点 ,未完待续- JQ插件就是用JQ代码编写的工具.就比如说我们用的模板,如EasyUi.我们只需要引入EasyUi的JS文件,然后调用它对应的方法,效果就出来了.实现 ...
- jq插件调用常见错误处理
在调用jq插件时,有时会遇到莫名其妙的错误.特别是当使用jq老版本或者年代久远的插件时更为常见. 这时多半是由于jq的更新太快造成的. 在jq的发展中,特别是1.8.3之后的jq放弃了以前的很多写法, ...
- 移动端JQ插件hammer使用详解
** 移动端JQ插件hammer使用详解 ** 用法: 1,首先引入jq2.0以上版本和jquery.hammer.js. 2,获取元素,和jq一样,在后面加上hammer就可以了 var hamme ...
- 骚操作 ！IDEA 防止写代码沉迷插件 !
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 原文地址:juejin.cn/post/6914083 ...
- 动手自己写一个 xcode 插件(Xcode Source Editor Extensions)附源码
2019独角兽企业重金招聘Python工程师标准>>> 动手自己写一个 xcode插件 (暂时需要注释功能,所以简单的写一个注释插件) -----Xcode Source Edit ...
最新文章
- 如何记录2秒内实现1800度转体+翻腾，百度智能云黑科技教你看懂跳水
- 前沿|Google AI提新型神经网络，对神经元进行高精度自动重建
- 看过的编程类好书（资料）
- metapath2vec: Scalable Representation Learning for Heterogeneous Networks
- 2021-07-21新技术赋能数智财会，用友YonBIP财务云激活企业创新能力
- Idea解决Web server failed to start. Port 8080 was already in use.端口被占用(亲测)
- ACM001 Quicksum
- element form自定义校验_SpringBoot分组校验及自定义校验注解
- 智能感知与万物互联学术讲座
- python 去除panda安装包_沉淀，再出发：python中的pandas包
- 路由器常见问题及解决办法
- 本人CSDN资源重传、0积分获取的方法以及重要声明（长期有效）
- 可用的码支付系统源码
- oracle -3233,ORA-3233表空间相关问题处理
- 【空间数据库】空间数据库引擎（Spatial DataBase Engine）ArcSDE详解
- EasyUI datagrid editor 中用filebox上传图片失败问题
- party_bid_core三种数据结构分析
- 2020年五大学科竞赛国家队成员名单，保送清华仅7人！
- 脏写、脏读、不可重复读、幻读
- 同构数怎么判断_编程：输入1－100以内的一个整数，判断这个数是否是同构数。输出不同的情况...