JQuery/PHP

JvaScript实现文字从左向右依次显示的效果

也想出现在这里?联系我们
创客云

在日常的 web 开发中,很多时候网页需要实现一些看上去比较炫酷的效果,比如,在 HTML 中 JvaScript 用实现文字从左向右依次显示的效果,下面贴两段代码,已测试可用

方法一

  1. <script>
  2. var index=0;
  3. var str=document.getElementById("jingyan-p").innerHTML;
  4. function type(){
  5. if(index==str.length){index=0;}
  6.     if(index<str.length){
  7.         document.getElementById("jingyan-p").innerText = str.substring(0,index++);
  8.     }
  9. }
  10. setInterval(type, 100);
  11. </script>
也想出现在这里?联系我们
创客主机

方法二

  1. <script>        
  2.     var i=0;
  3.     var str="2021,您需要一个适合做全网营销的网站";            
  4.     window.onload=function typing(){
  5.                 //获取div
  6.         var mydiv=document.getElementById("jingyan-span");
  7.         mydiv.innerHTML+=str.charAt(i);
  8.         i++;
  9.         var id=setTimeout(typing,100);
  10.         if(i==str.length){
  11.             clearTimeout(id);
  12.             }
  13.         }
  14. </script>
收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

精品专区

Contact us all-in-one button with callback - 轻量级侧边按钮客服插件,允许设置自定义的提示语,还支持添加无限数量的联系方式,不仅支持国内的微信二维码、QQ等主流程序,还支持几乎所有国外的热门社交工具、及时聊天程序等,演示参考我们官网右下角客服按钮。

购买插件