JAVASCRIPT——文字出现效果练习
写一句诗。诗的最初状态是隐藏的，效果是让诗缓慢出现，直到显示完全
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
*
{
margin:0px;
padding:0px;
} #b
{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:40px;
font-weight:bold;
width:1000px;//设置诗句的宽度
height:50px;//设置诗句的高度
}
</style>
<body>
<div id="a" style="width:0px;height:50px;overflow:hidden">--诗句宽度初始为0
<div id="b" >我是人间惆怅客，知君何事泪纵横，断肠声里忆平生！</div>
</div>
</body>
<script type="text/javascript">
show();
function show()
{
var s=document.getElementById("a");
if(parseInt(s.style.width)<)//如果a的宽度小于500px,（把a的宽度转为整数）
{
var w=parseInt(s.style.width)+;
s.style.width=w+"px";//拼接字符串
window.setTimeout("show()",);//每隔20毫秒字符宽度加1px
}
}
</script>
</html>
JAVASCRIPT——文字出现效果练习的更多相关文章
- HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
- JavaScript 省市级联效果
JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- Rainyday.js – 使用 JavaScript 实现雨滴效果
Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...
- JS 黑客帝国文字下落效果
黑客帝国文字下落效果 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- JavaScript之放大镜效果2
在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...
- JavaScript之放大镜效果
在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...
- 仿知乎/途家导航栏渐变文字动画效果-b
demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...
- （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）
一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...
- JavaScript实现动画效果
说到JavaScript实现动画效果,不得不想到两个函数,setTimeout和setInterval. setTimeout的常用的使用方法为 setTimeout(callback, delay) ...
随机推荐
- android面试题之五
二十六.什么情况会导致Force Close ?如何避免?能否捕获导致其的异常? 抛出运行时异常时就会导致Force Close,比如空指针.数组越界.类型转换异常等等. 捕获:可以通过logcat查 ...
- js 倒计时 已过去时间
页面中的代码: <strong id="timer" datatime="2012-12-09 10:20:30"></strong> ...
- 16进制字符串转换为byte数组
/// <summary> /// 16进制字符转换为byte数组 /// </summary> /// <param name="hexString" ...
- RDLC报表系列(一) 简单的动态数据绑定和配置
RDLC系列链接 RDLC报表系列(一) 简单的动态数据绑定和配置 RDLC报表系列(二) 行分组 RDLC报表系列(三) 总计和折叠 RDLC报表系列(四) 矩阵 RDLC报表系列(五) 简单的图 ...
- Winform获取应用程序的当前路径的方法集合(转)
Winform获取应用程序的当前路径的方法集合,具体如下,值得收藏 //获取当前进程的完整路径,包含文件名(进程名). string str = this.GetType().Assembly.Loc ...
- D - Specialized Four-Digit Numbers
Description Find and list all four-digit numbers in decimal notation that have the property that the ...
- 从汇编看c++中成员函数指针(一)
下面先来看c++的源码: #include <cstdio> using namespace std; class X { public: int get1() { ; } virtual ...
- png压缩工具-PngoutWin
PngoutWin是一款聪明的png图片压缩工具,别的压缩工具压缩PNG是通过丢弃透明层来达到减肥的目的.可是不能透明的PNG还能叫PNG吗?PngoutWin它不会丢弃原本的透明,而是通 ...
- microwindows Win32 API demo
初次使用microwindows,资料有限,我也是费了很多功夫才明白.所以记录下来,好帮助那些爱学习的童鞋,另外请大虾们多多指教. 什么是microwindows,什么作用,等背景介绍我就不多说了,因 ...
- nginx location的管理以及查找
关于nginx代码解析,我师兄雕梁的博客(http://simohayha.javaeye.com)有一系列的文章可以阅读.我这里将只介绍他博客里没有关注到的或者讲述不详细的,但是我个人又认为是ngi ...