今天抽时间写一个定义文字样式的插件：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>word</title>
</head>
<body>
<div class="word">
<p>路上看见的股份来看会计师过分的</p><br />
<p>路上看见的股份来看会计师过分的</p><br />
<p>路上看见的股份来看会计师过分的</p><br />
<p>路上看见的股份来看会计师过分的</p><br />
<p>路上看见的股份来看会计师过分的</p><br />
<p>路上看见的股份来看会计师过分的</p><br />
</div>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
aWords:function(word){
var defaults={
color:"black",
backgroundColor:"#f2f2f2",
paddingLeft:10
};
var word=$.extend(defaults,word);
return this.each(function(obj){
var obj=$(this);
var o=word;
var item=$("p",obj);
item.hover(function(){
$(this).css(
{color:o.color},
{backgroundColor:o.backgroundColor}
);
$(this).animate(
{paddingLeft:o.paddingLeft},
{queue:false,duration:300}
)
},function(){
$(this).css(
{color:""},
{backgroundColor:""}
);
$(this).animate(
{paddingLeft:"0"},
{queue:false,duration:300}
)
})
})
}
})
})(jQuery);
//调用代码
$(document).ready(function(){
$(".word").aWords({
paddingLeft:"10px",
color:"red"
})
})
</script>
</body>
</html>
效果图：
