通常,文字渐显特效都是用图或者flash来做。这里懒得去找UI,火速自己写吧,有个背景图就照,文字特效听我的。
开始--->
背景:1)两行文字,从左到右,渐显;2)第一行文字:欢迎登录;第二行文字:我是第二行HOHO
------------------背景介绍完毕-------------
1.body里放2个DIV
<div id="textface" style='font-size:48px;color:#FFFFFF;float:left;margin-top:170;margin-left:250'></div>
<div id="textfacebom" style='font-size:48px;color:#FFFFFF;float:left;margin-top:218;margin-left:0'></div>
2、JS控制实现特效
<script language="JavaScript">
var interval = 120;//打印间隔(毫秒)
var msg = "欢迎登录 " ;//第一行的文字,注意:这一行的文字后面的空格数是第二行的总长度
var seq=0,len = msg.length;
var msg2 = "我是第二行HOHO ";//第一行的文字,注意:后面的空格其实是让人看着文字悬停了一会,多一个空格就多悬停interval
var seq2=0,len2 = msg2.length;
function textScroll2() {
try{
document.getElementById("textfacebom").innerHTML = msg2.substring(0, seq2+1);
}catch(e){}
seq2++;
if ( seq2 >= len2 ) {
seq2 = 0;
document.getElementById("textfacebom").innerHTML = '';
return;
}
window.setTimeout("textScroll2();", interval );
}
function textScroll() {
try{
document.getElementById("textface").innerHTML = msg.substring(0, seq+1);
window.status = msg.substring(0, seq+1);//左下角显示
}catch(e){}
seq++;
if(seq == 5){
textScroll2();
}
if ( seq >= len ) {
seq = 0;
document.getElementById("textface").innerHTML = '';
document.getElementById("textfacebom").innerHTML = '';
window.setTimeout("textScroll();", interval );
}
else
window.setTimeout("textScroll();", interval );
}
textScroll();
</script>
<---结束
结束语:自己玩玩,虽然多数时候在搞后台,发现前台也蛮有意思的~~
分享到:
相关推荐
html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js...
html5+css3文字动画渐隐渐显显示
js+css实现彩色网格雨3D特效,绚丽多彩,高分web应用代码! js+css实现彩色网格雨3D特效,绚丽多彩,高分web应用代码! js+css实现彩色网格雨3D特效,绚丽多彩,高分web应用代码! js+css实现彩色网格雨3D特效,绚丽...
HTML+CSS+JS 实现的 通过json 动态生成文本、图片 、转盘概率 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的 HTML+CSS+JS 实现的
html+JS+CSS特效 html+JS+CSS特效 html+JS+CSS特效 html+JS+CSS特效 html+JS+CSS特效
使用JavaScript + CSS 实现的Tab菜单随着时间的变化而变化的特效功能。
web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页...
说明:设置时间定时,在规定的时间内替换前一个节点的内容 1、关键代码:javascript: 复制代码代码如下: [removed] var dome=document.getElementById(“dome”); //获取节点 var dome1=document.getElementById...
Html+Css+Javascript从入门到精通.pdfHtml+Css+Javascript从入门到精通.pdf
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
html+javascript+css实现漂亮网页,效果非常好
使用html+css+js实现自定义弹出对话框/输入框,使用html+css+js实现自定义弹出对话框/输入框,使用html+css+js实现自定义弹出对话框/输入框
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
使用html+css+js+jquery实现小米官网首页
纯HTML+CSS+JS 实现跨年祝福效果,跨年倒计时10秒钟,背景音乐里的声音也是倒数10秒钟,完美切合,鼠标点击产生烟花效果,并且烟花可以改成任意文字。年份根据系统时间自动生成。可自定义后面的happy new year 2022 ...
HTML+CSS+JavaScript实现登录注册源码
一款简单的js+css3文字上下滚动切换动画特效,可设置多种不同颜色的文字。
js+css3文字闪光滑过动画特效
HTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+...
脚本简介:纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效,动态加载效果,背景色动态渐变,纯css+js实现,对于简单页面实现进度条效果可以简单利用此方法。 脚本简介:纯js+css3渐变...