JS_自己写的JQ插件

关注

原创最新推荐文章于 2026-02-27 11:02:04 发布 4.8k 阅读 AI 写同款· GEO 优化 ›

手机流畅的秘密：拆解LPDDR5X在骁龙8 Gen2平台上的电源与信号完整性设计本文深入解析了LPDDR5X内存与骁龙8 Gen2处理器在旗舰手机中的协同设计，重点探讨了0.5V超低电压下的电源完整性设计以及8.5Gbps高速传输中的信号完整性挑战。通过详细的电源树架构、关键器件选型和布线策略分析，揭示了如何实现高性能与低功耗的完美平衡，为手机流畅体验提供硬件保障。阅读详情

看了<<锋利的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">
    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>

$(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>