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


Posted in Javascript onFebruary 18, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JS自动缩小超出大小的图片
Oct 12 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 #Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 #Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 #Javascript
AngularJS 2.0新特性有哪些
Feb 18 #Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 #Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 #Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 #Javascript
You might like
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php 文件上传实例代码
2012/04/19 PHP
php日历制作代码分享
2014/01/20 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
php异常处理捕获错误整理
2019/09/23 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
简单了解JavaScript异步
2019/05/23 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
Python中int()函数的用法浅析
2017/10/17 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
通过shell+python实现企业微信预警
2019/03/07 Python
Python登录系统界面实现详解
2019/06/25 Python
基于Python实现简单学生管理系统
2020/07/24 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
个人考核材料
2014/05/15 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers