定义文字样式-插件

今天抽时间写一个定义文字样式的插件:

 

<!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>

 

效果图:

 

定义文字样式-插件_第1张图片

你可能感兴趣的:(定义文字样式-插件)