js打字效果
//文字依次出来效果
$.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);
} $('.font').autoplay();
//文字依次出来效果,这种方法可行,但流程步骤一多容易混乱
var con = $(".fontx");
var index = 0;
var tid = null; function start(s){
var len = s.length;
con.text('');
tid = setInterval(function(){
con.append(s.charAt(index));
if(index ++ === len){
clearInterval(tid);
index = 0;
}
},100);
} start(str)
js打字效果的更多相关文章
- JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
- JS让网页上文字出现键盘打字的打字效果
一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...
- js实现打字效果
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing& ...
- html + css 实现无需 js 的打字效果
以前要达到类似在电脑上打字的效果,需要 js+html.今天我将介绍一种新方法.本文主要介绍纯 html+css 实现打字效果,有一定的参考价值,大家可以学习一下.提供所有代码,可以直接使用. 一.原 ...
- CSS 实现打字效果
JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...
- javascript实现键盘自动打字效果
最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html&g ...
- jQuery模仿人类打字效果插件typetype
typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...
- 基于jQuery标题有打字效果的焦点图
给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- 纯css实现打字效果
概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...
随机推荐
- PHP 5.3以上版本推荐使用mysqlnd驱动
什么是mysqlnd?mysqldnd(MySQL native driver)是由PHP源码提供的mysql驱动连接代码.它的目的是代替旧的libmysql驱动. 传统的安装php的方式中,我们在编 ...
- 基于Java Netty框架构建高性能的Jt808协议的GPS服务器(转)
原文地址:http://www.jt808.com/?p=971 使用Java语言开发一个高质量和高性能的jt808 协议的GPS通信服务器,并不是一件简单容易的事情,开发出来一段程序和能够承受数十万 ...
- java后台分页实例一
后台框架:jfinal + velocity.前台框架:jquery 页面 <!DOCTYPE html> <html> <head> <meta char ...
- AESDK关于AEFX_CLR_STRUCT的用处
主要是在初始化UI值的时候遇到问题,一直报错 但确实没有用到ui_width,ui_height...,仔细检查例子工程发现,少了一个AEFX_CLR_STRUCT宏 AEFX_CLR_STRUCT其 ...
- lucene4.7学习总结 (zhuan)
http://blog.csdn.NET/mdcmy/article/details/38167955?utm_source=tuicool&utm_medium=referral ***** ...
- 基于jQuery实现文字倾斜显示代码
这是一款基于jQuery实现文字倾斜显示,这是一款基于jQuery实现的超酷动态文字显示效果.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. ...
- Codeforces 482C Game with Strings(dp+概率)
题目链接:Codeforces 482C Game with Strings 题目大意:给定N个字符串,如今从中选定一个字符串为答案串,你不知道答案串是哪个.可是能够通过询问来确定, 每次询问一个位置 ...
- EmWebAdmin 生成流程分析
继上一篇的简略的说明 EmWebAdmin 的地址以后下载,生成之后,这一篇讲一下该模板的生成流程 // 上一篇地址: http://www.cnblogs.com/chenfulin5/p/6856 ...
- Okra框架(三) 搭建HTTP服务器
Okra通过封装成熟高效的框架以简化应用程序服务器构建的过程.上一篇介绍了使用Okra快速搭建Socket服务器. 本篇承接上一篇,介绍快速搭建简单高性能的Http服务器. 这里需要说明一下Okra框 ...
- Pycharm 建立工程,包含多个工程目录