最简单实用的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 ...
随机推荐
- hdu--2570--迷瘴
#include<iostream> #include<vector> #include<algorithm> using namespace std; int m ...
- RabbitMQ安装以及java使用(二)
上一篇记录了rabbitmq的安装,这一篇记录一下rabbitmq的java客户端的简单使用,当然在项目中我们有更为复杂的应用场景,这里只有最简单的点对点生产者与消费者模式. 1.建立工程 首先建立一 ...
- Android service 服务的应用之电话监听器以及短信监听器
首先建立一个项目工程文件,如下图所示:
- java多线程系列(七)---Callable、Future和FutureTask
Callable.Future和FutureTask 前言:如有不正确的地方,还望指正. 目录 认识cpu.核心与线程 java多线程系列(一)之java多线程技能 java多线程系列(二)之对象变量 ...
- Java企业微信开发_05_消息推送之发送消息(主动)
一.本节要点 1.发送消息与被动回复消息 (1)流程不同:发送消息是第三方服务器主动通知微信服务器向用户发消息.而被动回复消息是 用户发送消息之后,微信服务器将消息传递给 第三方服务器,第三方服务器接 ...
- Github 开源:使用 .NET WinForm 开发所见即所得的 IDE 开发环境(Sheng.Winform.IDE)【2.源代码简要说明】
GitHub:https://github.com/iccb1013/Sheng.Winform.IDE 在上一篇文章中,简要的介绍了 Sheng.Winform.IDE 的基本功能和要实现的目标: ...
- PHP学习之旅——PHP环境搭建
1.wampserver.exe软件下载 http://www.wampsferver.com/官网地址: 选择对应版本下载即可. 2.wampserver服务控制面板 主要控制的是整个wampse ...
- 利用mvc filterconfig属性实现权限验证
好久没写过博客了,突然发现最后博客更新时间是2016年,感觉好长远 权限控制基本是所有cms系统或者进销存,或者几乎所有能和业务系统扯上关系的系统都要用上的一个模块,很多都想把这个模块独立出来,权限单 ...
- 关于IE浏览器的一些思路
首先说说我对IE的看法: 第一感觉倔强.孤僻特立独行.(总是和别人不一样,是初学者的噩梦) 第二感觉个性(每个版本都需要你去用不同的代码去适配她) 虽然现在IE已经升级到了11相对于以前的IE8,IE ...
- fatal error LNK1201:写入程序数据库“***.pdb”时出错;请检查是否是磁盘空间不足、路径无效或权限不够
问题很简单,是因为你的程序正在运行,或者windbg工具在执行dump文件,文件被占用,所以无法写入: