jquery打字机效果
html代码
<div id="box"> <div id="content"> <div id="code"> 如果你认识以前的我,那么你会原谅现在的我。 </div> </div> </div>
css代码
body{margin:0;padding:0;background:#ffe;font-size:12px;overflow:auto} #mainDiv{width:500px;height:100%;margin: 0 auto;margin-top: 100px;} #code{float:left;width:440px;height:400px;color:#333;font-size:12px;margin:200px 0 0 200px;}
js代码
<script type="text/javascript"> (function($) { $.fn.typewriter = 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++; } $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : '')); //if (progress >= str.length) { //clearInterval(timer); //} }, 100); }); return this; }; })(jQuery); $(function(){ $("#code").typewriter(); }) </script>