2赞

javascript 洒脱飘动的文字

作者：coco2冰冰 | 2022-01-25 21:37

飘动的文字，看着还挺自在、洒脱，网上经常见的东西，原来是这么实现的，奉献给大家哦。

<title>飘动的文字</title> <body> <script language="JavaScript"> message="北京是我家，发展靠大家！" 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("Your message is to short") } } 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> <h2><div id="jumpx" style="color:green"></div></h2> <script> if (document.all||document.getElementById){ jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx jump0() } else document.write(message) </script> </body>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

推荐阅读

程序员
在Angular JS Module中传递并获取DOM元素值

如何解决《在AngularJSModule中传递并获取DOM元素值》经验，为你挑选了0个好方法。 ... [详细]
程序员
AWS IoT - 通过.Net,REST和证书访问阴影

如何解决《AWSIoT-通过.Net,REST和证书访问阴影》经验，为你挑选了0个好方法。 ... [详细]
程序员
相互测试所有值,并从结果矩阵中形成组

如何解决《相互测试所有值,并从结果矩阵中形成组》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何将图书目录中的图书分配给各自的作者？

如何解决《如何将图书目录中的图书分配给各自的作者？》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何更新/升级Facebook API版本？

如何解决《如何更新/升级FacebookAPI版本？》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何通过在张量流中使用softmax-output层并行(在神经网络中)确定多个标签？

如何解决《如何通过在张量流中使用softmax-output层并行(在神经网络中)确定多个标签？》经验，为你挑选了1个好方法。 ... [详细]
程序员
无法删除Azure App Service计划

如何解决《无法删除AzureAppService计划》经验，为你挑选了3个好方法。 ... [详细]
程序员
我应该使用哪个记录器来获取Cloud Logging中的数据

如何解决《我应该使用哪个记录器来获取CloudLogging中的数据》经验，为你挑选了1个好方法。 ... [详细]
程序员
从Kinect相机压缩RGB-D视频

如何解决《从Kinect相机压缩RGB-D视频》经验，为你挑选了0个好方法。 ... [详细]
程序员
自Android 6 Marshmallow以来,javax.crypto.Cipher的工作方式不同

如何解决《自Android6Marshmallow以来,javax.crypto.Cipher的工作方式不同》经验，为你挑选了1个好方法。 ... [详细]
程序员
启动未使用Xcode 7显示的图像

如何解决《启动未使用Xcode7显示的图像》经验，为你挑选了1个好方法。 ... [详细]
程序员
app:stackFromEnd for RecyclerView无法在xml中运行？

如何解决《app:stackFromEndforRecyclerView无法在xml中运行？》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在Kibana中配置索引模式

如何解决《如何在Kibana中配置索引模式》经验，为你挑选了1个好方法。 ... [详细]
程序员
名称中的React native Image变量不起作用

如何解决《名称中的ReactnativeImage变量不起作用》经验，为你挑选了1个好方法。 ... [详细]
程序员
为什么使用dotenv库而不是解析ini文件？

如何解决《为什么使用dotenv库而不是解析ini文件？》经验，为你挑选了0个好方法。 ... [详细]
程序员
打印免费monad

如何解决《打印免费monad》经验，为你挑选了1个好方法。 ... [详细]
程序员
提取/读取React propTypes

如何解决《提取/读取ReactpropTypes》经验，为你挑选了1个好方法。 ... [详细]
程序员
SBT - 如何禁用特定任务的插件(例如"包")

如何解决《SBT-如何禁用特定任务的插件(例如"包")》经验，为你挑选了0个好方法。 ... [详细]
程序员
一个小游戏/测验:你看到我的价值观了吗？(解释十六进制值)

如何解决《一个小游戏/测验:你看到我的价值观了吗？(解释十六进制值)》经验，为你挑选了0个好方法。 ... [详细]
程序员
"粘性"选择Angular应用程序

如何解决《"粘性"选择Angular应用程序》经验，为你挑选了1个好方法。 ... [详细]

coco2冰冰

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章