jquery 插件（二） lettering.js

最新推荐文章于 2024-11-06 08:20:50 发布

brainwkernighan

最新推荐文章于 2024-11-06 08:20:50 发布

阅读量3.3k

点赞数

本文链接：https://blog.youkuaiyun.com/brainwkernighan/article/details/6566144

版权

lettering.js是一个很好玩的超轻量级的js插件，很小，真佩服其创意，为啥自己没事的时候不能写一个呢？

文件:jquery.lettering.js(0.6v,1kb)

作用：对字母、单词、或者段乱进行染色

思想：把单词分成一个一个的字母，然后对字母进行赋予不同的颜色

使用：1.首先加载lettering.js

2.对要分的div h1运行函数littering('').参数可以是words，line，默认为空，即为字母分割

3.注意div中必须有h1或者span这样的tag把字母包含才可以运用，不能直接用div来包含要分割的文字

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <mce:script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></mce:script> <mce:script src="lettering/jquery.lettering.js" mce_src="lettering/jquery.lettering.js" type="text/javascript"></mce:script> <title>无标题文档</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .demo { padding: 50px; border:1px solid #ccc; font-weight:bold; color: red; background:#d0d0d0; font-size:20px; line-height:1.5; text-align:center; } .demo h1 { font-size:72px; text-transform:uppercase; margin-bottom:0px;} .char2, #demo2 .word2,.line2 { color: orange; } .char3, .word3, .line3 { color: yellow; } .char4, .line4 { color: blue; } .char5 { color: green; } .char6 { color: indigo; } .char7 { color: violet; }</style> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="demo1" class="demo"> <h1>Rainbow</h1> </div> <div id="demo2" class="demo"> <h1>Hi,multiple color</h1> </div> <div id="demo3" class="demo"> <h1>Double Rainbow</h1> </div> </body> </html>