zoukankan      html  css  js  c++  java
  • 打字机 效果

    原理:获取需要打字机效果的句子,然后按照index++添加 定时器

    逐个显示,代码如下:

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
      <script src="jquery.min.js"></script>
     </head>
     <body>
    	<div class="autotype" id="autotype">
    	<p>我是张超,一名前端工程师</p>
    	<br/>
    	<p>你温柔的表情</p>
    	<p>会让我伤心</p>
    	<br/>
    	<p>六月的雨,只是无情的你~</p>
    </div>
    
    <script>
    		$.fn.autotype = function(){
    		var $text = $(this);
    		console.log('this',this);
    		
    		var str = $text.html();//返回被选 元素的内容
    		
    		var index = 0;
    		var x = $text.html('');
    		//$text.html()和$(this).html('')有区别
    		
    		var timer = setInterval(function(){
    			//substr(index, 1) 方法在字符串中抽取从index下标开始的一个的字符
    			var current = str.substr(index, 1);
    			
    			if(current == '<'){
    			//indexOf() 方法返回">"在字符串中首次出现的位置。
    				index = str.indexOf('>', index) + 1;
    			}else{
    				index ++ ;
    			}
    			
    			//console.log(["0到index下标下的字符",str.substring(0, index)],["符号",index & 1 ? '_': '']);
    			//substring() 方法用于提取字符串中介于两个指定下标之间的字符
    			$text.html(str.substring(0, index) + (index & 1 ? '_': ''));
    			if(index >= str.length){
    				clearInterval(timer);
    			}
    		},100);
    	};
    	
    	$("#autotype").autotype();
    </script>
     </body>
    </html>
    

      

  • 相关阅读:
    如何去重一个Oracle表
    配置Eclipse来开发Java 程序
    在windows上使用opera mini
    Oracle OLAP 介绍
    一个Batch作业调度系统构思
    how to Use Subversion with TortoiseSVN
    java official Design Pattern
    how to install ubuntu OS combined with Windows
    确保DWBI项目成功的几个关键点
    spinner 读取sqlite
  • 原文地址:https://www.cnblogs.com/vali/p/5904176.html
Copyright © 2011-2022 走看看