首頁 > web前端 > js教程 > 主體

js打字特效程式碼分享

小云云
發布: 2018-03-02 13:12:11
原創
1325 人瀏覽過

本文主要跟大家分享js打字特效程式碼,希望能幫助大家。



<html>  
<head>  
<title>打字效果的带链接的新闻标题</title>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<style type="text/css">  
body{font-size:14px;font-weight:bold;}  
</style>  
</head>  
<body>  
最新内容:<a id="HotNews" href="" target="_blank"></a>  
<script>  
var NewsTime = 2000;    //每条新闻的停留时间  
var TextTime = 50;      //新闻标题文字出现等待时间,越小越快  
var newsi = 0;  
var txti = 0;  
var txttimer;  
var newstimer;  
var newstitle = new Array();    //新闻标题  
var newshref = new Array();     //新闻链接  
newstitle[0] = "Jensen_Yao的博客";  
newshref[0] = "http://blog.csdn.net/jensen_yao";  
newstitle[1] = "http://blog.csdn.net/jensen_yao";  
newshref[1] = "http://blog.csdn.net/jensen_yao";  
newstitle[2] = "最高的效率就是对现有材料的最佳利用。";  
newshref[2] = "http://blog.csdn.net/jensen_yao";  
newstitle[3] = "学会偷懒!";  
newshref[3] = "http://blog.csdn.net/jensen_yao";  
newstitle[4] = "hello!";  
newshref[4] = "http://blog.csdn.net/jensen_yao";  
function shownew()  
{  
  var endstr = "_";  
  hwnewstr = newstitle[newsi];  
  newslink = newshref[newsi];  
  if(txti==(hwnewstr.length-1)){endstr="";}  
  if(txti>=hwnewstr.length){  
    clearInterval(txttimer);  
    clearInterval(newstimer);  
    newsi++;  
    if(newsi>=newstitle.length){  
      newsi = 0  
    }  
    newstimer = setInterval("shownew()",NewsTime);  
    txti = 0;  
    return;  
   }  
   clearInterval(txttimer);  
   document.getElementById("HotNews").href=newslink;  
   document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+endstr;  
   txti++;  
   txttimer = setInterval("shownew()",TextTime);  
 }  
shownew();  
</script>  
<p><a href="http://www.108js.com" target="_blank">Jensen_Yao的博客</a></p>  
</body>  
</html>
登入後複製

相關推薦:

javascript實作自動輸出文字(打字特效)_javascript技巧

#

以上是js打字特效程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!