每天一个jquery插件-文字的特效
文字的特效
关键词，水
效果如下
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字的特效</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/wzdtx.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#div{
border: 1px solid lightgray;
width:80%;
margin: 10px auto;
text-indent: 36px;
line-height: 36px;
}
</style>
</head>
<body>
<div id="div">
--省略的文字部分--
</div>
</body>
</html>
<script>
var temp = wzdtx("div");
temp.action();
</script>
js部分
var wzdtx = function(id){
var $id = $("#"+id);
//取得这里面所有的文字，然后全部细分成一个个span标签
var str = $id.text();
$id.text("");
str.split("").forEach(item=>{
var $span = $("<span>"+item+"</span>");
$span.appendTo($id);
})
return{
$id:$id,
action:function(){
var that = this;
var $spans = that.$id.find("span");
var index = 0;
var length = $spans.length;
var t = setInterval(function(){
var c1 = Math.floor(Math.random()*256);
var c2 = Math.floor(Math.random()*256);
var c3 = Math.floor(Math.random()*256);
$($spans[index]).css("color","rgb("+c1+","+c2+","+c3+")")
index++;
if(index>=length){
clearInterval(t);
}
},50)
}
}
}
- 找到对应容器，留下控制对象
- 然后把容器里面的文本全部挨个用span包裹起来，当然特殊的字符格式要记得跳过才能增加流畅性
- 然后在渲染的时候按照标记来逐个延时修改颜色，在这里随机产生rgb的三个数字再修改进对应span标签的行内样式就行了