记-给博客添加打字机特效

折腾 124 字 736 阅

记一次给typecho博客添加JavaScript实现动态打字机效果

效果看我博客的顶部

环境:

typecho 1.1
Theme Cuteen

教程

登录typecho后台
外观
设置外观
顶部风格设置
首页顶部小标题
填入以下代码:

   <div id="chakhsu">
   </div>
   <script>
       var chakhsu = function(r) {
           function t() {
               return b[Math.floor(Math.random() * b.length)]
           }
 
           function e() {
               return String.fromCharCode(94 * Math.random() + 33)
           }
 
           function n(r) {
               for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
                   var l = document.createElement("span");
                   l.textContent = e(),
                       l.style.color = t(),
                       n.appendChild(l)
               }
               return n
           }
 
           function i() {
               var t = o[c.skillI];
               c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")),
                   r.textContent = c.text,
                   r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))),
                   setTimeout(i, d)
           }
           var l = "通过文字和影像记忆,",
               o = ["我们延长了多一倍的生命。", ].map(function(r) {
                   return r + ""
               }),
               a = 2,
               g = 1,
               s = 5,
               d = 75,
               b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
               c = {
                   text: "",
                   prefixP: -s,
                   skillI: 0,
                   skillP: 0,
                   direction: "forward",
                   delay: a,
                   step: g
               };
           i()
       };
       chakhsu(document.getElementById('chakhsu'));
   </script>

然后在去修改主题main.css文件(反正就是主页的css文件)加上这个

#chakhsu{
    color: #FFFFFF;
}

这是设置字体为白色,也可以自己根据背景图片修改。

- THE END -
打赏 分享
评论 ( 70 )
OωO
  1. Xklosp

    online viagra canada - cost of viagra 100mg viagra 150mg otc

    昨天 18:41 回复
  2. Pzdpcb

    best sildenafil in india - cialis or viagra viagra fast delivery

    一天前 回复
  3. Jeygit

    generic ivermectin for humans - stromectol ivermectin ivermectin cost australia

  4. Koisrt

    ivermectin for humans - ivermectin over the counter canada ivermectin 9mg

  5. Neurontine

    Alli Pills For Sale

  6. Twbbal

    canadian pharmacy 1 internet online drugstore - cialis price walmart cialis buy india

  7. Veltfieni
    Veltfieni

    https://buyneurontine.com/ - side effects gabapentin

  8. Tdmyov

    prednisone 60 mg - prednisone 5mg online 1 mg prednisone daily

    10月9日 回复
  9. Prednisone

    Online Fluxotine No Prescription

    10月9日 回复
  10. Flrjwj

    cialis 20 mg cost - non prescription cialis rxpharmacycoupons

    10月8日 回复
  11. Intelut
    Intelut
    10月8日 回复
  12. Plhezn

    india viagra generic - sildenafil citrate sildenafil 200 mg online

    10月7日 回复
  13. Jpusft

    ivermectin order online - stromectol drug ivermectin malaria

    10月6日 回复
  14. biareemep
    biareemep
    10月5日 回复
  15. Jsapiv

    orlistat dosis recomendada - generic name for xenical xenical pill

    10月4日 回复
  16. Fmoagz

    cenforce 25 usa and uk - cenforce 120 mg cenforce 150mg

    10月3日 回复
  17. Yvtkzi

    hydroxychloroquine henry ford study - hydroxychloroquine sulfate buy prednisone 10mg tabs

    10月2日 回复
  18. offisee
    offisee

    https://prednisonebuyon.com/ - prednisone for back pain

    10月2日 回复
  19. Cmtczc

    ivermectin 3mg dose - ivermectin uk buy stromectol covid 19

    9月27日 回复
  20. lasix for cats

    Brand Name Viagra Cheapest

    9月26日 回复
  21. Tilange
    Tilange
    9月26日 回复
  22. Tcpcuj

    thesis writer - help with term paper online thesis writing

    9月26日 回复
  23. coeriot
    coeriot
    9月25日 回复
  24. Gijptt

    buy accutane usa - isotretinoin 40mg how to get accutane prescription online

    9月24日 回复
  25. acouple
    acouple

    http://buylasixshop.com/ - furosemide pill

    9月24日 回复
  26. buy zithromax cheap

    Doxycycline 20mg Internet Low Price

    9月24日 回复
  27. Bspmou

    liquid tadalafil - tadalafil canadian pharmacy tadalafil online

    9月23日 回复
  28. Eeygag

    sildenafil dosage - silepilled sildenafil cheap

    9月22日 回复
  29. kibundend
    kibundend
    9月22日 回复
  30. buy hydroxychloroquine

    Flonase Pas Cher

    9月22日 回复
  31. Noqjrl

    how much does ivermectin cost - buy ivermectin cream for humans ivermectin lotion

    9月21日 回复
  32. Hebtaj

    ivermectin for sale - ivermectin cost in usa ivermectin 12 mg

    9月20日 回复
  33. entaisy
    entaisy
    9月18日 回复
  34. Tycgzg

    doxycycline 150 mg capsules - doxycycline 200mg price prednisolone cost

    9月18日 回复
  35. Anozui

    how to get cytotec in south africa - can i buy cytotec over the counter in south africa cytotec 25 mg

    9月17日 回复
  36. Easedia
    Easedia
    9月16日 回复
  37. Priligy

    usar viagra

    9月16日 回复
  38. Rbvjfk

    ventolin price uk - ventolin cost canada buy Albuterol

    9月16日 回复
  39. sholype
    sholype
    9月15日 回复
  40. Ydnoxy

    furosemide 40 mg price - furosemide brand name lasix 12.5 mg

    9月14日 回复
  41. Pptulu

    10 mg prednisone daily - prednisone in canada buying prednisone mexico

    9月13日 回复
  42. Cascalm
    Cascalm
    9月13日 回复
  43. Ljuuex

    buy stromectol 6mg - buy ivermectin for humans australia ivermectin 80 mg

    9月12日 回复
  44. Attassy
    Attassy
    9月12日 回复
  45. Vienief
    Vienief
    9月11日 回复
  46. Mttshi

    pharmacy com - Cialis in usa viagra cialis levitra

    9月10日 回复
  47. Viagra

    Cialis De Lilly

    9月9日 回复
  48. finasteride 5 mg for sale

    medicamento llamado cialis

    9月9日 回复
  49. Rjzgbw

    where can you buy viagra online - Viagra alternative how much should viagra cost

    9月8日 回复
  50. Cialis

    Buying Levitra Online Safe

    9月7日 回复
  51. Tubfwk

    write my cover letter for me - buy custom essays good academic writing

    9月7日 回复
  52. Embably
    Embably

    http://buysildenshop.com/ - brand generic viagra

    9月7日 回复
  53. Iutgee

    medrol pak 4mg - lyrica 5 generic lyrica 2018

    9月6日 回复
  54. Yaxckt

    amoxicillin price without insurance walmart - buy amoxil online antibiotics without a doctor’s prescription

    9月5日 回复
  55. enrormeno
    enrormeno
    9月4日 回复
  56. Odcwht

    accutane generic south africa - accutane india online accutane price in india

    9月3日 回复
  57. Tsvmea

    prednisone 100 mg daily - 4mg prednisone daily non prescription prednisone 20mg

    9月2日 回复
  58. Evorogava
    Evorogava
    9月1日 回复
  59. Yjlltk

    ivermectin australia - ivermectine where to buy ivermectin pills

    9月1日 回复
  60. Biough

    vardenafil effectiveness - audrey vardenafil generic buy vardenafil with dapoxetine

    8月30日 回复
  61. Gwfhmm

    tadalafil chewable - web pharmacy

    8月29日 回复
  62. Stromectol

    Zithromax Iv Pediatric Dosing

    8月28日 回复
  63. anowirway
    anowirway
    8月28日 回复
  64. Zdvsir

    buy viagra over the counter australia - generic viagra online for sale cheap viagra soft

    8月28日 回复
  65. Japdfc

    neurontin 800 - buy generic neurontin synthroid 100mcg

    8月26日 回复
  66. Muujzy

    buy cheap doxycycline uk - cost of doxycycline canada doxycycline 100mg cost

    8月25日 回复
  67. Xeenbw

    cytotec price - where to get cytotec pills in south africa where can i get cytotec pills in south africa

    8月23日 回复
  68. Grqmbm

    ventolin 90 - ventolin pills ventolin for sale

    8月22日 回复
  69. Vctoar

    buy stromectol 12mg - ivermectina stromectol buy uk

    8月20日 回复
感谢打赏