下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了):

首先,我们要在header导入一个jQuery,并新建一个CSS标签,在body部分建立一个外层的div,取一个ID,里面再建立一个内层的div,取一个ID,内层div里,新建一个h1标签和一个p标签,将您显示的文字放到里面,示例代码如下:

           <div id="table">

			<div id="centeralign">
<h1 id="h1">Sample typing effect.</h1>
<p>Lorem ipsum dolor sit amet 放入您的文字</p>
</div> </div>

  

下面,在CSS标签中修改body部分的布局样式,小博使用了简单有效的弹性布局来实现的,效果图及代码如下:

代码如下,注意布局完成之后要先将p标签none掉:

<style type="text/css">
body,
html {
margin:;
height: 100%; font-family: 'Oxygen Mono', monospace;
color: #999;
} #table { width: 100%;
height: 100%;
background-color: #e5e5e5;
} #centeralign {
width: 100%;
height: 100%;
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
}
#centeralign h1 {
display: inline-block;
text-transform: uppercase;
letter-spacing: 1pt;
font-size: 30pt;
margin-bottom: 15px;
} #centeralign p {
text-align: left;
margin:;
text-transform: lowercase;
font-size: 10pt;
font-weight:;
width: 50%;
display: none;
}
</style>

接下来在body的里面,新建一个JS标签,利用定时器和延时器来实现banner中的文字动画效果:

主要有两点:

      1:声明一个函数,传入两个参数  元素:element ; 速度:speed。

        定义:①var text = $(element).text();

           ②$(element).html('');

             ③var i = 0;

          此函数取到了,全局的text,利用延时器延迟出现每个字符,但是h1标签会和

      2:利用延时器,将h1和p标签,延时分别打印,即将h1标签的文字,打印完成之后,再执行p标签的打印工作;

        定义:①定义  var  speed = 75  (数值可以自己定义);

           ② 定义一个变量   var delay = $('h1').text().length * speed ;------------取到h1打印完成的时间

           ③ 定义p标签的一个延时器,延时时间即为h1标签的打印完成时间,这里不要忘记把CSS中none掉的p标签,取到display,设为inline-block;

           ④ 将打印速度通过函数传参,分别将speed赋给h1和p标签;

        JS完整代码如下:

      

<script>
function typeEffect(element, speed) {
var text = $(element).text();
$(element).html('');
var i = 0;
var timer = setInterval(function() {
if (i < text.length) {
$(element).append(text.charAt(i));
i++;
} else {
clearInterval(timer);
}
}, 30);
}
$(document).ready(function() {
var speed = 75;
var delay = $('h1').text().length * speed ;
typeEffect($('h1'), speed);
setTimeout(function() {
$('p').css('display', 'inline-block');
typeEffect($('p'), speed);
}, delay);
});
</script>

 那么,一个简单实用的banner图的文字动画效果,就完成了。希望各位博主,能对小博提出建议,不断完善修改,小博定当虚心修改,不断进步。 

最简单实用的JQuery实现banner图中的text打字动画效果!!!的更多相关文章

  1. 经验分享:10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  2. 10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...

  3. 用最简单的代码写出banner图轮播效果

    以下视频是由[赵一鸣随笔]博客提供的“用最简单的代码写出banner图轮播效果”. 查看全屏高清视频,请点击链接:http://www.zymseo.com/58.html

  4. JQuery实现banner图滚动

      前  言           jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...

  5. jquery自定义banner图滚动插件---(解决最后一张图片倒回第一张图片的bug)

    banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...

  6. Jquery 实现banner图滚动效果

    html代码: <div id="focus"> <ul> <li><p>禅的修行应要无欲无求1</p><a hr ...

  7. 简单实用的jQuery分页插件

    在做商城和订单管理的时候,常常会用到分页功能,所以我封装了一个jQuery的分页插件,该插件主要实现上下翻页,输入数字跳转等功能. 具体实现如下: 输入参数需要当前页码pageNo,总页码totalP ...

  8. 一款简单实用的jQuery图片画廊插件

    图片画廊 今天分享一个自己实现的jQuery 图片画廊插件. 看一下效果图: 点击图片时: 在线演示地址:http://www.jr93.top/photoGallery/photoGallery.h ...

  9. 简单实用的JQuery弹出层

    效果: 初始状态时滚动条是可以滚动的 弹出层出现之后:1.弹窗始终居于整个窗口的中间 2.滚动条不可滚动 实现代码: HTML代码: <div class="container&quo ...

随机推荐

  1. VM虚拟机的配置

    1.软件安装 点击如图所示文件安装虚拟机 点击下一步,再安装过程中输入密钥 1F04Z-6D111-7Z029-AV0Q4-3AEH8 设置相关内容完成安装 2.加载虚拟机 点击软件图标打开软件 软件 ...

  2. [STL] day 1~2 Problem Set

    Q#1 #include <cmath> #include <cstdio> #include <vector> #include <iostream> ...

  3. NYOJ 25 A Famous Music Composer

    A Famous Music Composer 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 Mr. B is a famous music composer. O ...

  4. Canvas: 优雅的代码作图系列:中国国旗

    Canvas: 优雅的代码作图系列:中国国旗 有很多个这练手的,好的差的都有.这次,我演示下用极客的代码,画出最标准的中国国旗,并详细说明代码是怎么写出来的. 绘制规范: 一.严格按照绘制说明: 二. ...

  5. 菜鸟的 Sass 学习笔记

    介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...

  6. java8之lambda表达式入门

    1.基本介绍 lambda表达式,即带有参数的表达式,为了更清晰地理解lambda表达式,先上代码: 1.1 两种方式的对比 1.1.1 方式1-匿名内部类 class Student{ privat ...

  7. session和cookie的辨析[阅读]

    session和cookie是网站浏览中较为常见的两个概念,也是比较难以辨析的两个概念,但它们在点击流及基于用户浏览行为的网站分析中却相当关键.基于网上一些文章和资料的参阅,及作者个人的应用体会,对这 ...

  8. RMAN数据库恢复测试

    RMAN恢复实践   RMAN> list backup; using target database control file instead of recovery catalog List ...

  9. Ubuntu无法访问windows分区

    正常情况: 重启, 先进入windows, 再重启进入Ubuntu(一定是重启, 先关机再进Ubuntu没用). 异常情况: sudo ntfsfix /dev/sda5(或6或7,得看哪个盘无法访问 ...

  10. 微服务架构下的API网关

    顾名思义,是出现在系统边界上的一个面向API的.串行集中式的强管控服务,这里的边界是企业IT系统的边界,主要起到隔离外部访问与内部系统的作用.在微服务概念的流行之前,API网关的实体就已经诞生了,例如 ...