jQuery插件Mouse Over Animation for Text制作文字透镜、波浪和透明效果

gundumw100

实例：
http://labs.bitmeister.jp/moamoa/example1.html

用法：
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.moatext-min.js"></script>

<div class="moatext_lens">I have a dream ...[其它文字省略]</div>
如上实例，不需要书写任何javascript代码，就能实现了文字透镜效果，注意，只使用了一个类名moatext_lens，其它效果使用也一样，其区别在于使用在类不同，分别如下：

moatext_lens 文字透镜效果
moatext_wave 文字波浪效果
moatext_opacity 文字透明效果

更高级点的用法：
<script type="text/javascript" language="JavaScript"><!--  $(function(){    $(".moamix1").moatext({effects:["lens","wave"]});  });--></script><div class="moamix1">I have a dream ...</div>
<script type="text/javascript" language="JavaScript"><!--  $(function(){    $(".moamix2").moatext({effects:["lens","wave","opacity"]});  });--></script><div class="moamix2">もちろん日本語でも大丈夫です。</div>
<script type="text/javascript" language="JavaScript"><!--  $(function(){    $(".moafunc").moatext({hover:[        function(){$(this).css({            color: "#FF0000",            fontWeight: "bold"        });},        function(){$(this).css({            color: "#000000",            fontWeight: "normal"        });}    ]});  });--></script><div class="moafunc">Please visit our site ...</div>
<script type="text/javascript" language="JavaScript"><!--  $(function(){$(".omikuji").css({opacity:"0.0"}).eq(Math.floor(Math.random()*3)).css({opacity:"1.0"}).moatext({effects:["opacity"],oneway:true,values:{opacity:{base:"0.0"}}});--></script><div class="omikuji">大吉です！よかったですね！</div><div class="omikuji">吉です。まぁまぁですね！</div><div class="omikuji">凶！でも、元気を出して！</div>
<script type="text/javascript" language="JavaScript"><!--  $(function(){$(".moaoptions").moatext({effects: ["lens","wave","opacity"],values:{"opacity": {"base": "1.0","enter": "0.1","leave": "1.0"},"wave": {"enter": ["-50px","20px"]}},duration:2000,easing:"swing"});  });--></script><div class="moaoptions">Hello　こんにちは...</div>