模拟Flash放大镜的动态JS效果

最新推荐文章于 2025-08-08 08:17:28 发布

转载最新推荐文章于 2025-08-08 08:17:28 发布 · 2k 阅读

文章标签：

#flash #generator #html #function #div

HTML JS 网页设计学习与技巧专栏收录该内容

178 篇文章

订阅专栏

无意看到一个FLASH,就是一个类似放大镜逐个浏览文字的效果，于是便想用js表示出来，比较简单，但是效果不是很好，好像有些BUG!继续努力中。。。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
  html,body{font-size:26px;letter-spacing:4px;font-family:'Arial black'}
  </style>
  <script type="text/javascript">
  var str1="Tianfeng Fine Chemicals Co.Ltd"
  var i=0;
  function animate(){
    i++;
    var s1=document.getElementById("s1");
    var len_s=str1.length;
    if(i>len_s-3){i=0}
    str2=str1.substring(0,i)+"<span style='font-size:30px;position:relative'>"+str1.substr(i,1)+"</span>"+"<span style='font-size:34px;position:relative'>"+str1.substr(i+1,1)+"</span>"+"<span style='font-size:30px;position:relative'>"+str1.substr(i+2,1)+"</span>"+str1.substring(i+3,len_s);
    s1.innerHTML=str2;
    setTimeout("animate()",100);
  }
  </script>
  </head>
  <body onload="animate()">
  <div id="s1" ></div>
  </body>
</html>