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>
    

      

  • 相关阅读:
    浅谈Sass与Less区别、优缺点
    混合开发的几个框架
    什么是Node.js?
    初入AngularJS
    jQuery的效果函数
    jQuery的一些选择器
    CSS3新增的属性有哪些:
    linux 新建用户、用户组 以及为新用户分配权限
    linux各个文件作用
    Linux CentOS6.5 命令修改网络配置
  • 原文地址:https://www.cnblogs.com/vali/p/5904176.html
Copyright © 2011-2022 走看看