js+jQuery实现网页打字机效果（带光标）

在写网站的时候，有时候可能需要打字机动画去实现一些页面效果的显示，我在网上找了很久也没有很完整的，符合我要求的代码，索性就结合网上的大神们的代码段自己写了一个

HTML

<div class="container"></div>

CSS

        .container{float: left;display: inline-block;position: relative;}@keyframes blink-caret { 50% { background-color: transparent; } }span{animation:blink-caret 1s step-end infinite;width: 3px;height: 20px;background-color: #000;float: left;position: absolute;right: -10px;}

var s = 'Welcome to LoVueAn';var con = $('.container');var index = 0;var length = s.length;var tId = null;function start(){con.text('');con.append('<span></span>');tId=setInterval(function(){con.append(s.charAt(index));if(index++ === length){clearInterval(tId);index = 0;start()}},400);}start();

效果图

这段代码采用了JS中的定时器，支持输入完之后归零再次动画，通过append添加了一个span标签模拟光标，css动画渲染闪烁效果，再通过绝对定位始终依附在父容器的右方以达到模拟输入效果的目的。注意在表头引入jquery！

网上搜索到的一般都是通过原生JS写出，但没有光标效果，纯CSS写出来的又对容器的宽要求很高，光标一直悬于最后方不利于实战开发，我认为这种方法相对较好

js+jQuery实现网页打字机效果（带光标）相关推荐

js如何获取html图片,JS/JQuery获取网页或文章或某DIV所有图片
要获取网页所有图片,我们可以通过Javascript就能轻松实现,不过要想获得文章或某容器(如:Div)里所有图片,使用JQuery而不是Javascript来实现就会变得更加简单.本文将给你详细介绍 ...
js+html2canvas实现网页放大镜效果：放大镜图片使用css样式background背景图，鼠标移动使用样式background-position动态设置
实现效果: 鼠标移动到需要放大的网页上时,鼠标静止不动500毫秒后,一个长方形的放大镜框显示,放大镜中显示当前区域2.2倍的效果,并且这时候鼠标移动放大的区域也跟着变化.放大镜限制:放大 ...
[置顶] Jquery实现网页marquee效果
原本在前端html代码中,实现文字或者图片的水平垂直滚定,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,后来想想那还是使用javascript代码来实现.后来又喜欢上了jqu ...
html如何制作查看更多横条,页面浏览量顶部横条显示代码－附“Js/Jquery获取网页屏幕可见区域高度”...
偶然看到这个页面浏览量显示的东东,很有意思,自己做了一个. 代码如下:html> 页面浏览量顶部横条显示 $(function(){ $(window).scroll(function() { ...
【实战】用CSS实现文本打字机效果
之前,我们的文章中已经有通过 JS 的方式实现文本打字机的效果了,具体可以看这篇文章: [前端三分钟]利用Javascript实现打字效果在本文中,你将学习如何使用纯CSS实现打字机效果,使网站的文 ...
jq挑战30天——打字机效果+小程序
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
jquery实现的打字机字幕效果
记得以前看电视的时候,电视里偶尔会出现文字一个紧接一个出现,伴随着打字机滴答滴答声音的字幕效果,常常好奇其实现效果.今天周末,没课就顺便想了想用javascript实现打字机效果.用了一个小时左右,就 ...
HTML5与jQuery实现渐变绚丽网页图片效果
HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果.在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像 ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...

js+jQuery实现网页打字机效果（带光标）

js+jQuery实现网页打字机效果（带光标）相关推荐

最新文章

热门文章