首页 > 开发 > JS > 正文

JavaScript与jQuery实现的闪烁输入效果

2024-05-06 16:28:39
字体:
来源:转载
供稿:网友
这篇文章主要介绍了JavaScript与jQuery实现的闪烁输入效果,结合实例形式分别分析了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/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表