最简单实用的JQuery实现banner图中的text打字动画效果!!!
下面,就让小博详细介绍如何实现上面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打字动画效果!!!的更多相关文章
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
- 用最简单的代码写出banner图轮播效果
以下视频是由[赵一鸣随笔]博客提供的“用最简单的代码写出banner图轮播效果”. 查看全屏高清视频,请点击链接:http://www.zymseo.com/58.html
- JQuery实现banner图滚动
前 言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...
- jquery自定义banner图滚动插件---(解决最后一张图片倒回第一张图片的bug)
banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...
- Jquery 实现banner图滚动效果
html代码: <div id="focus"> <ul> <li><p>禅的修行应要无欲无求1</p><a hr ...
- 简单实用的jQuery分页插件
在做商城和订单管理的时候,常常会用到分页功能,所以我封装了一个jQuery的分页插件,该插件主要实现上下翻页,输入数字跳转等功能. 具体实现如下: 输入参数需要当前页码pageNo,总页码totalP ...
- 一款简单实用的jQuery图片画廊插件
图片画廊 今天分享一个自己实现的jQuery 图片画廊插件. 看一下效果图: 点击图片时: 在线演示地址:http://www.jr93.top/photoGallery/photoGallery.h ...
- 简单实用的JQuery弹出层
效果: 初始状态时滚动条是可以滚动的 弹出层出现之后:1.弹窗始终居于整个窗口的中间 2.滚动条不可滚动 实现代码: HTML代码: <div class="container&quo ...
随机推荐
- VM虚拟机的配置
1.软件安装 点击如图所示文件安装虚拟机 点击下一步,再安装过程中输入密钥 1F04Z-6D111-7Z029-AV0Q4-3AEH8 设置相关内容完成安装 2.加载虚拟机 点击软件图标打开软件 软件 ...
- [STL] day 1~2 Problem Set
Q#1 #include <cmath> #include <cstdio> #include <vector> #include <iostream> ...
- NYOJ 25 A Famous Music Composer
A Famous Music Composer 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述 Mr. B is a famous music composer. O ...
- Canvas: 优雅的代码作图系列:中国国旗
Canvas: 优雅的代码作图系列:中国国旗 有很多个这练手的,好的差的都有.这次,我演示下用极客的代码,画出最标准的中国国旗,并详细说明代码是怎么写出来的. 绘制规范: 一.严格按照绘制说明: 二. ...
- 菜鸟的 Sass 学习笔记
介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...
- java8之lambda表达式入门
1.基本介绍 lambda表达式,即带有参数的表达式,为了更清晰地理解lambda表达式,先上代码: 1.1 两种方式的对比 1.1.1 方式1-匿名内部类 class Student{ privat ...
- session和cookie的辨析[阅读]
session和cookie是网站浏览中较为常见的两个概念,也是比较难以辨析的两个概念,但它们在点击流及基于用户浏览行为的网站分析中却相当关键.基于网上一些文章和资料的参阅,及作者个人的应用体会,对这 ...
- RMAN数据库恢复测试
RMAN恢复实践 RMAN> list backup; using target database control file instead of recovery catalog List ...
- Ubuntu无法访问windows分区
正常情况: 重启, 先进入windows, 再重启进入Ubuntu(一定是重启, 先关机再进Ubuntu没用). 异常情况: sudo ntfsfix /dev/sda5(或6或7,得看哪个盘无法访问 ...
- 微服务架构下的API网关
顾名思义,是出现在系统边界上的一个面向API的.串行集中式的强管控服务,这里的边界是企业IT系统的边界,主要起到隔离外部访问与内部系统的作用.在微服务概念的流行之前,API网关的实体就已经诞生了,例如 ...