很有意思的文字组合排序网页特效

3周前 (04-24 14:53)阅读15回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4494
  • 级别管理员
  • 主题898
  • 回复2
楼主

通过js实现文字组合特效,当用点击文字后组合成三个中文,可运行代码看效果,根据自己的需求来修改即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>很有意思的文字组合排序网页特效_武鸣人</title>
<style type="text/css">
body
{
font-family: '微软雅黑';
line-height: 2;
font-size: 18px;
color: #444;
}
b{font-weight:normal;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="avata" style="cursor: pointer;width:50%;" onclick="anim()">王某人,自号【步舞之鹤】,洋诨【ONEBOYS】,八六年生人,籍贯义乌,师出浙林,寄居杭州。混迹互联网、IT界二年余,以捣鼓前端为业。英俊潇洒不足,博学多才欠精。为人善良,外冷内热。性格优柔寡断,善思不善断,善听不善言,十足的低调焖烧型青年。喜体验互联网新事物,好学习崇拜达人牛爷。业余网球爱好者,浙大紫荆港网球场每周六午后,逢无事必到。武鸣人,www.wuming.ren。僻野茅庐,若劳大驾,不胜惶恐。</div>
<script type="text/javascript">/*<![CDATA[*/
var d='43#43643F44)44745!45345G:%6?>6E/6JH6P,JU96X1JF8(F89F9#F90F9HF:1F:AX01X0?X0OX18X23X2DX3/X3@1%E6%@:45?@C?A+;&2>CODA0I@JO%6M71LFAW*1V9BU0+55D56.56=56O578;@>AJ>H9*N**SO>Y&BXO,XO?Y()Y(;1B46)43$F3%03%B3&,3&=3&O1E86E9=J#=J5=JE=>C=?-=??=@(=@:82#C;7H;,JB@JC,JC=JCOJD:JE#JE4DF<O7<U(<ZA<U&BTO,TO>U((U(OU):U*$43#43643F44)44745!45345G:%6?>6E/6JH6P,JU96X1JF8(F89F9#F90F9HF:1F:AX01X0?X0OX18X23X2DX3/X3@1%E6%@:45?@C?A+;&2>CODA0I@JO%6M71LFAW*1V9BU0+55D56.56=56O578;@>AJ>H9*N**SO>Y&BXO,XO?Y()Y(;1B46)43$F3%03%B3&,3&=3&O1E86E9=J#=J5=JE=>C=?-=??=@(=@:82#C;7H;,JB@JC,JC=JCOJD:JE#JE4DF<O7<U(<ZA<U&BTO,TO>U((U(OU):U*$43#43643FU(OU):U*$';
var xo=[], yo=[], xd=[], yd=[], e=[], an=-1, dir=-1 , t=0;
var e;
function i()
{//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
 var n=0, g=document.getElementById('avata'), l=g.innerHTML, s='';
 while (n<l.length)
 {
  var r=l.charAt(n);
  if (r==' ') {s+=r; n++}
  if (r=='<') while (l.charAt(n-1)!='>') s+=l.charAt(n++);
  s+='<b>'+l.charAt(n++)+'</b>';
 }
 g.innerHTML=s;
 e=document.getElementById('avata').getElementsByTagName('b');
 for (n=0; n<e.length; n++)
 {
  xo[n]=e[n].offsetLeft;
  yo[n]=e[n].offsetTop;
  var p=d.charCodeAt(n*3)*1600+d.charCodeAt(n*3+1)*40+d.charCodeAt(n*3+2)-78768;
  yd[n]=p%500;
  xd[n]=(p-yd[n])/500;
 }
 for (n=0; n<e.length; n++)
 {
  e[n].style.position='absolute';
  e[n].style.left=xo[n]+'px';
  e[n].style.top=yo[n]+'px';
 }
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
function ani()
{ t=parseInt(e.length/4)+2;
 for (var n=0; n<t; n++)
 {
  m=e.length-1-n;
  if ((an-n<=30)&&(an-n>=0))
  {
   var b=(Math.cos((((an-n)*Math.PI)/30))+1)/2;
   var a=1-b;
   for (i=0; i<=t; i+=t)
   {
    e[n+i].style.left=((yd[n+i]+111)*a+xo[n+i]*b)+'px';
    e[n+i].style.top=((xd[n+i]+74)*a+yo[n+i]*b)+'px';
    e[m-i].style.left=((yd[m-i]+111)*a+xo[m-i]*b)+'px';
    e[m-i].style.top=((xd[m-i]+74)*a+yo[m-i]*b)+'px';
   }
  }
 }
 an+=dir;
 if ((an-t<=30)&&(an>=0))
 {
  window.setTimeout("ani()", 30);
 }
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
function anim()
{
 dir*=-1;
 if ((an<0)||(an-t>30)) ani();
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
i();
/*]]>*/
</script>
</body>
</html>


0
0
收藏0
回帖

很有意思的文字组合排序网页特效 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息