非常炫酷的波浪文字特效

第一步:把如下代码加入到<head>区域中
<script>
message="www.balijieji.com"
ns6switch=1
var ns6=document.getElementById&&!document.all
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
if (ns6&&!ns6switch){
jump.innerHTML=message
return
}
if(message.length > 6){
for(i=0; i != message.length;i++){
txt=txt+"<span style=‘position:relative;‘ id=‘n"+i+"‘>"+message.charAt(i)+"</span>"};
jump.innerHTML=txt;
txt="";
jump1a()
}
else{
alert("www.balijieji.com")
}
}
function jump1a(){
nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",50)
}
else{
jump1b()
}
}
function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout("jump1b()",50)
}
else{
jump2()
}
}
function jump2(){
txt="";
for(i=0;i != message.length;i++){
if(i+num > -1 && i+num < 7){
txt=txt+"<span style=‘position:relative;top:"+mes[i+num]+"‘>"+message.charAt(i)+"</span>"
}
else{txt=txt+"<span>"+message.charAt(i)+"</span>"}
}
jump.innerHTML=txt;
txt="";
if(num != (-message.length)){
num--;
setTimeout("jump2()",50)}
else{num=0;
setTimeout("jump0()",50)}}
</script>
第二步:把如下代码加入到<body>区域中

<h2><div id="jumpx" style="color:33ff33"></div></h2>
<script>
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
document.write(message)
</script>
巴黎接机网编辑收集提供(www.balijieji.com)

时间: 2024-10-13 02:35:45

非常炫酷的波浪文字特效的相关文章

10大炫酷的HTML5文字动画特效欣赏

文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HTML5和CSS3的强大之处就在于此.本文分享的10款炫酷的HTML5文字动画特效非常不错,一起来看看吧. 1.HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想

jQuery和CSS3炫酷按钮点击波特效

这是一款效果非常炫酷的jQuery和CSS3炫酷按钮点击波特效.该特效当用户在菜单按钮上点击的时候,从鼠标点击的点开始,会有一道光波以改点为原点向外辐射的动画效果,非常绚丽. 在线演示:http://www.htmleaf.com/Demo/201503151527.html 下载地址:http://www.htmleaf.com/jQuery/Buttons-Icons/201503151526.html

一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   源码下载 简要教程 这是一款效果非常炫酷的jQuery和CSS3 3D旋转画廊特效插件.第一个DEMO是一个简单的例子,使用CSS3来制作3d旋转效果,然后用js来控制前后导航按钮.第二个DEMO是第一个DEMO的升级版,它增加了图片标题.查看图片.键盘控制等其它功能. HTML结构 这个3D画廊

html5炫酷购物车结算动画特效

这是一款效果十分炫酷的html5购物车结算动画特效插件.该购物车结算动画提供了4种效果,每种效果都使用CSS3来制作炫酷的动画特效,这些效果使用户的购物结算体验大大的增强了. 在线演示:http://www.htmleaf.com/Demo/201501231255.html 下载地址 :http://www.htmleaf.com/html5/html5muban/201501231254.html

HTML5 Canvas炫酷宇宙黑洞引力特效

black-hole.js是一款效果非常炫酷的模拟宇宙黑洞引力特效的js插件.该插件基于HTML5 canvas,使用WebGL. glfx.js和 numeric.js 共同制作完成.其效果是在鼠标滑过图片时鼠标区域形成黑洞效果,使它周围的空间坍缩. 注意:由于HTML5的安全限制,插件中的图片必须是同源的图片.在本地浏览器这个插件时,Chrome浏览器会看不到效果,你可以使用Firefox浏览器在本地查看这个demo. 效果演示:http://www.htmleaf.com/Demo/201

HTML5 SVG和CSS3炫酷液态菜单按钮特效

这是一款使用HTML5 SVG Filters 和CSS3制作的效果非常炫酷的液态菜单按钮特效.该菜单特效开始时显示一个主菜单按钮,当点击该按钮时,子菜单按钮会像液态物质一样依次展开,其效果就像一粒水滴分离为两粒一样. 效果演示:http://www.htmleaf.com/Demo/201504081648.html 下载地址:http://www.htmleaf.com/html5/SVG/201504081647.html

jQuery炫酷3D旋转幻灯片特效插件

iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效. 这款幻灯片插件的特点有: 高度灵活和可定制性. 灵活的用户界面的设计. 在单个HTML页面中允许存在多个实例. 可以定制每一个slider的easing效果. 多语言支持. 可以在 iOS 和 Android 上正常工作. 可以选择自动播放模式下鼠标悬停时停止播放幻灯片. 非常容易调整尺寸. 兼容外部字体(如谷歌字体). 有预加载进度条显示.

28种CSS3炫酷加载动画特效

这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构思新颖,效果非常的酷. 效果演示:http://www.htmleaf.com/Demo/201503301597.html 下载地址:http://www.htmleaf.com/css3/css3donghua/201503301596.html

非常炫酷的网页样式特效

<canvas id="evanyou" width="1920" height="934"></canvas> /*CSS代码:*/ <style type="text/css">  #evanyou {    position: fixed;    width: 100%;    height: 100%;    left: 0;    top: 0;  } </style>