使用JS与jQuery实现文字逐渐出现特效
该需求出现原因:想要实现一个在一开始加载页面时就出现一行文字逐渐出现的效果,且需要实现的是一种逐渐的过渡出现效果为不是一种生硬的突然间歇性出现。于是便开始尝试利用最近正在学习的jQuery技术和JS实现。
【注】:该篇文章适合初学者阅读,大佬请跳过。
【需要的知识点】:JS中利用Timing中的两个静态方法setTimeout()和clearTimeout()实现(详细参考:http://www.w3school.com.cn/js/js_timing.asp),同时使用了一个递归小方法。
1、网页简单编写:
1 <!-- 使用标签属性onload: --> 2 <!-- 该属性实现在页面加载时完成内部的相关函数方法:show() 事件--> 3 4 <body onload="show()"> 5 6 <!-- 给需要的div命名为word,方便定位元素 --> 7 <div id="word"> 8 9 </div> 10 </body>
2、编写相关的css样式表,这里只列出主要的样式:
1 <style> 2 #word>span{3 opacity: 0; 4 } 5 </style>
该处的opacity:0实现使word下面的所有span标签中的字体变为透明色。
3、引入jQuery库:
1 <script src="jquery-1.12.4.js"></script>
这里使用1.x版本的最后一版1.12.4版,大家可以在线百度jQuery引入在线版。我这里是在本地就有一个jQuery文档了,所以可以直接引入。
4、编写相关的jQuery入口函数:
<script language="javascript" type="text/javascript">$(function () { //jQuery的入口函数// 编写相关的jQuery代码与JS代码... }); </script>
5、以下为主要代码分块描述:
1 var str="英雄名称:宫本武藏被动技能:宫本武藏的被动技能为'狩魔',使宫本武藏" + 2 "释放技能将会为下一次普通攻击蓄力,造成额外30(+60%物理加成)点物理" + 3 "伤害并减少所有技能1秒冷却时间。"; 4 // 测试 5 // console.log(str[3]); 6 // console.log($.isArray(str)); //false 7 8 // 向名为word的div添加指定字数个span标签,方便操作 9 for (var i=0; i<str.length; i++){ 10 // 添加str的长度个span,每一个span里面保存着一个文字 11 $("#word").append("<span>" + str[i] + "</span>"); 12 }
这里是用于预先将每一个文字添加进span标签,当然使用div也可以不过这里使用span标签是因为它是inline元素,不用转换类型。str是一个字符串,但是在进行isArray()判断后可以看出其并不是数组,应该是一个伪数组,但依然可以使用str[i]取其中的单个文字。
1 var j = 0; // 用于计数 2 3 // show()方法的另外一种书写方式 4 show = function () { 5 // $("#word>span"):jQuery语法,选择器,选中word其中的所有span标签 6 // eq():选择元素,返回jQuery对象 7 $("#word>span").eq(j).animate({opacity:"1"}, 100); 8 j += 1; 9 // setTimeout("要做的动作(方法名)", 时间(毫秒)) 10 // 这里用到了递归实现 11 var t = setTimeout("show()", 100); 12 if (j >= str.length){ 13 clearTimeout(t); // 清除延时动作,退出递归 14 } 15 }
setTimeout()和clearTimeout()可以自行去w3school查看,这里不赘余描述。
在setTimeout这里使用递归实现文字的逐渐显示,在完成前一个动画的实现后才会继续下一层递归的方法动画实现。
$("#word>span");是jQuery语法,相当于css中的选择器。
eq()方法用于返回专门的jQuery对象,animate()实现动画效果:第一个是实现透明度的恢复(取值0-1),第二个参数实现效果作用时间。
转载于:https://www.cnblogs.com/tianqingzx/p/10522498.html
使用JS与jQuery实现文字逐渐出现特效相关推荐
- html逐渐现实文字的特效,使用JS与jQuery实现文字逐渐出现特效
该需求出现原因:想要实现一个在一开始加载页面时就出现一行文字逐渐出现的效果,且需要实现的是一种逐渐的过渡出现效果为不是一种生硬的突然间歇性出现.于是便开始尝试利用最近正在学习的jQuery技术和JS实 ...
- html轮播文字上下轮播,js、jQuery实现文字上下无缝轮播、滚动效果
因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 文字上下无缝轮播 * { margin: 0; ...
- 【js与jquery】文字提示与图片提示的制作
1.效果如图: 2.文字提示代码: <script type="text/javascript"> //<![CDATA[ $(function(){ var x ...
- html轮播图jquery,原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以 ...
- html5文字跳动特效,jQuery网页文字跳动动画特效
js代码 $(document).ready(function() { /* * 参数详解: *upTime上移的时间 *downTime下落的时间 *beatHeight上移高度 *isAuth是否 ...
- js在html中加文字走马灯特效,jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- jquery 立体走马灯_jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
- 原生js与jquery的区别
原生js与jquery的区别 1.选择器: js: $('.car_img_con img')[0]; var jsObj = document.getElementsByClassName('sel ...
- html5 文字滑动效果,jQuery滑动文字特效
这是一个很简单的jQuery滑动文字效果.插件中使用了 Lettering.js,你可以在 Github 上找到它. HTML Illustrations 使用data-hover来表示鼠标滑过的元素 ...
最新文章
- python-切片实例
- 搭建dubbo项目解决dubbo.xml标签报错的问题
- c++ 结构体地址 转换成ulong_零基础入门之结构体字节对齐
- 复现经典:《统计学习方法》第 8 章 提升方法
- PowerDesigner将PDM导出生成WORD文档
- 深入浅出gRPC——极客时间李林锋
- java中long类型转换为int类型
- 产品经验谈:B端产品需求的3个层次,你都了解吗?
- 计算机采购类增值税税率是多少,各个行业的税率是多少?
- 技术动态 | 事理图谱,下一代知识图谱
- 基于SOA架构集成spring-boot+mybatis+dubbo+Druid+zookeeper
- 倒计时2天!1024 程序员节全日程曝光,105 场深度演讲点燃数字经济新时代
- python函数的基本使用_Python学习笔记——主要函数及基本使用(与C的对比)
- jquery修改带!important的css样式
- Base16,Base32,Base64编码的介绍
- leetcode:买卖股票最佳时机含手续费
- 爆笑,2008最新一句话笑喷饭!
- 谢菲尔德大学计算机科学学院地理位置,2020年谢菲尔德大学在哪里及校区详细地址介绍...
- CWE 4.7中的新视图:工业控制系统的安全漏洞类别
- C语言文件的读取和写入
热门文章
- Mapbox矢量切片本地化(离线)生成与发布方案
- 创建相册,批量删除,图片预览,上传图片
- irr java_java-irr: java版的IRR和XIRR,通过牛顿算法实现内部收益率的计算
- 经验分享 怎么修改PDF文件中的图片以及文字
- 北京药监局考试计算机操作,考科一电脑操作
- html英文字母大小,26个英文字母大小写的规范书写
- 如何进行app消息推送(push)
- BCH/BCHABC/BCHSV分叉后重放机制小结
- 思科视频会议系统+服务器,Cisco思科MCU5310视频会议系统服务器
- 古剑奇谭显示服务器维修,《古剑奇谭网络版》角色转服功能说明公告