实例:
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>
- jquery.moatext.min.rar (2 KB)
- 下载次数: 34