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 相关文章推荐
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
ajax与302响应代码测试
Oct 23 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
js自定义瀑布流布局插件
May 16 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
javascript操作向表格中动态加载数据
Aug 27 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
javascript回调函数详解
2018/02/06 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
Vue.js实现表格渲染的方法
2018/09/07 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
理解Python中函数的参数
2015/04/27 Python
Python写的一个简单监控系统
2015/06/19 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
Python线程之定位与销毁的实现
2019/02/17 Python
centos7之Python3.74安装教程
2019/08/15 Python
python 实现return返回多个值
2019/11/19 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
DNA基因检测和分析:23andMe
2019/05/01 全球购物
六月份红领巾广播稿
2014/02/03 职场文书
广告词串烧
2014/03/19 职场文书
英语教育专业自荐信
2014/05/29 职场文书
4s店活动策划方案
2014/08/25 职场文书
婚内分居协议书范文
2014/11/26 职场文书
教师个人教学总结
2015/02/11 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫