45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:JavaScript与jQuery的闪烁输入效果的详细介绍

JavaScript与jQuery的闪烁输入效果的详细介绍

2016-10-14 12:18:44 来源:www.45fan.com 【

JavaScript与jQuery的闪烁输入效果的详细介绍

本文实例讲述了JavaScript与jQuery实现的闪烁输入效果。分享给大家供大家参考,具体如下:

html部分

<div id="code">
 <p>/**</p>
 <p>*2014-2-12</p>
 <p>*代码自动闪烁输入</p>
 <p>*/</p>
 2014-2-14,I want to say:<br />
 Baby, I love you forever!<br />
</div>

js部分

function typewriter(id){
 var $ele = document.getElementById(id);
 var str = $ele.innerHTML, progress = 0;
 $ele.innerHTML = '';
 var timer = setInterval(function() {
  var current = str.substr(progress, 1);
  if (current == '<') {
   progress = str.indexOf('>', progress) + 1;
  } else {
   progress++;
  }
  $ele.innerHTML =str.substring(0, progress) + (progress & 1 ? '_' : '');
  if (progress >= str.length) {
   clearInterval(timer);
  }
 }, 75);
}

使用方法:

typewriter("code");

弄成个jquery插件

(function($) {
 $.fn.typewriter = 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);
   }
  }, 75);
 };
})(jQuery);

使用方法 :

$("#code").typewriter();

希望本文所述对大家JavaScript程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/78635.html
Tags: 实现 JavaScript jquery
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部