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>
    

      

  • 相关阅读:
    commons-lang3工具类学习(三)
    commons-lang3工具类学习(二)
    commons-lang3工具类学习(一)
    Spring之ClassPathResource加载资源文件
    Spring详解(十)加载配置文件
    java IO流总结
    Spring自定义注解配置切面实现日志记录
    使用@Cacheable 踩过的坑
    将BufferedImage转换为InputStream,亲测可用
    计算两个日期之间间隔的天数
  • 原文地址:https://www.cnblogs.com/vali/p/5904176.html
Copyright © 2011-2022 走看看