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>