下面,就让小博详细介绍如何实现上面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. hdu--2570--迷瘴

    #include<iostream> #include<vector> #include<algorithm> using namespace std; int m ...

  2. RabbitMQ安装以及java使用(二)

    上一篇记录了rabbitmq的安装,这一篇记录一下rabbitmq的java客户端的简单使用,当然在项目中我们有更为复杂的应用场景,这里只有最简单的点对点生产者与消费者模式. 1.建立工程 首先建立一 ...

  3. Android service 服务的应用之电话监听器以及短信监听器

    首先建立一个项目工程文件,如下图所示:

  4. java多线程系列(七)---Callable、Future和FutureTask

    Callable.Future和FutureTask 前言:如有不正确的地方,还望指正. 目录 认识cpu.核心与线程 java多线程系列(一)之java多线程技能 java多线程系列(二)之对象变量 ...

  5. Java企业微信开发_05_消息推送之发送消息(主动)

    一.本节要点 1.发送消息与被动回复消息 (1)流程不同:发送消息是第三方服务器主动通知微信服务器向用户发消息.而被动回复消息是 用户发送消息之后,微信服务器将消息传递给 第三方服务器,第三方服务器接 ...

  6. Github 开源:使用 .NET WinForm 开发所见即所得的 IDE 开发环境(Sheng.Winform.IDE)【2.源代码简要说明】

    GitHub:https://github.com/iccb1013/Sheng.Winform.IDE 在上一篇文章中,简要的介绍了  Sheng.Winform.IDE 的基本功能和要实现的目标: ...

  7. PHP学习之旅——PHP环境搭建

    1.wampserver.exe软件下载 http://www.wampsferver.com/官网地址:  选择对应版本下载即可. 2.wampserver服务控制面板 主要控制的是整个wampse ...

  8. 利用mvc filterconfig属性实现权限验证

    好久没写过博客了,突然发现最后博客更新时间是2016年,感觉好长远 权限控制基本是所有cms系统或者进销存,或者几乎所有能和业务系统扯上关系的系统都要用上的一个模块,很多都想把这个模块独立出来,权限单 ...

  9. 关于IE浏览器的一些思路

    首先说说我对IE的看法: 第一感觉倔强.孤僻特立独行.(总是和别人不一样,是初学者的噩梦) 第二感觉个性(每个版本都需要你去用不同的代码去适配她) 虽然现在IE已经升级到了11相对于以前的IE8,IE ...

  10. fatal error LNK1201:写入程序数据库“***.pdb”时出错;请检查是否是磁盘空间不足、路径无效或权限不够

    问题很简单,是因为你的程序正在运行,或者windbg工具在执行dump文件,文件被占用,所以无法写入: