字逐渐打出效果
即：2_
20_
2018_
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name ="viewport"content ="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0"/>
<title>test</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
</style>
</head>
<!-- <body onload="defaultUrl()"> -->
<body class="body">
<div id="code">
<span>这是测试啊</span>
<span>2018-11-12 </span>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
(function($){
$.fn.test=function(){
this.each(function() {
var $ele=$(this),str=$ele.html(),progress=0;
$ele.html('');
var timer=setInterval(function(){
var current = str.substr(progress, 1);//从开始截取的长度
if(current=='<'){
progress = str.indexOf('>', progress) + 1;//从某位置开始搜索某字符
}
else{
progress++
}
//progress & 1 意思是2者做且运算，即progress%2==1为true
$ele.html(str.substring(0, progress)+ (progress & 1 ? '_' : ''));
if (progress >= str.length) {
clearInterval(timer);
}
}, 80);
});
return this;//此处要写，不然不能链式调用
}
})(jQuery)
$('#code').test().css('color','red');
</script>
</body>
</html>
问题：
为什么用this.each?
首先在JQ中,each是遍历一个数组,比如你$('.some')返回的不一定只是一个jq对象,有可能是个数组,好多个elements.
所以return this.each(){}是把所有你索引的对象都作用到这个插件下.
你若保证你的插件每次都只会用一个JQ对象,那么你可以直接return this.
2735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
