Javascrip实现文字跳动特效

2024-04-02 17:21:32

一.如何让字符串变成一个个的字体，让我们去控制

1获取字符串内容

2清空字符串内容

3遍历字符串，然后一个个的切割出来。

4给切割出来的文字添加定位

5把添加好定位的文字，重新赋值到获取的元素里面。

二.鼠标滑动上去之后，该怎么去实现文字的跳动

1 定义一个变量0

2 定义定时器

3让变量不断的减少

4改变元素的top == 变量

5当变量达到一定高度的时候，让变量不断的增加

6 当变量减少到0（本身位置）的时候，

7清除动画改变元素的top = 0（本身位置）

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>
   文字跳动特效-vico
  </title>
  <style type="text/css">
   #txtDom{ padding: 50px; width:500px; margin: 0 auto; font-size: 16px;
   font-family: "微软雅黑"; line-height: 1.3em; text-indent: 2em;}
  </style>
 </head>
 <body>
  <div id="txtDom">
   要是没有错误和失败，你就不会学到东西；要是没有痛苦，你就不会长大。
   一旦你明白了这些，你就知道了一切事情都是为了某种目的而发生。
   所以不要紧张或者认为生活不公平，因为一切事情都有原因，只有时间能诉说教会了我们什么。
  </div>
  <script type="text/javascript">
   var txtAnim = {
    len: 0,
    txtDom: "",
    arrTxt: [],
    init: function(obj) {
     this.obj = obj;
     this.txtDom = obj.innerHTML.replace(/\s+/g, "");
     this.len = this.txtDom.length;
     obj.innerHTML = "";
     this.addDom();
    },
    addDom: function() {
     for (var i = 0; i < this.len; i++) {
      var spanDom = document.createElement("span");
      spanDom.innerHTML = this.txtDom.substring(i, i + 1);
      this.obj.appendChild(spanDom);
      this.arrTxt.push(spanDom);
     };
     for (var j = 0; j < this.len; j++) {
      this.arrTxt[j].style.position = "relative";
     };
     this.strat();
    },
    strat: function() {
     for (var i = 0; i < this.len; i++) {
      this.arrTxt[i].onmouseover = function() {
       this.stop = 0;
       this.speed = -1;
       var $this = this;
       this.timer = setInterval(function() {
        $this.stop += $this.speed; //0 += -1
        if ($this.stop <= -20) {
         $this.speed = 1;
        }
        $this.style.top = $this.stop + "px";
        if ($this.stop >= 0) {
         clearInterval($this.timer)
         $this.style.top = 0 + "px";
        };
       },
       15);
      };
     }
    }
   }
   var txtDom = document.getElementById("txtDom");
   txtAnim.init(txtDom);
  </script>
 </body>
</html>

以上所述是小编给大家介绍的Javascrip实现文字跳动特效，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对我们网站的支持！

Javascript实现图片轮播效果(一)让图片跳动起来

图片轮播效果,在各大网站的首页都能看到,比较常见.下面小编给大家分享这一效果的简单实现. 1.图片跳动起来 2.图片序列控制的实现 3.前后按钮控制的实现这篇文章来看图片按照间隔时间进行切换. 我们先把结构代码完成,这个我就不做详细的讲解了.先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
JavaScript 抽奖效果实现代码数字跳动版

JavaScript实现的抽奖效果数字跳动版 .a1 {}{ position: relative; font-family: Verdana; font-size: 200px; color: #888888; } function Lottery() { var Nos = Math.round(Math.random() * (4999 - 1) + 1); var result = document.getElementById("layer1"); if (result !
javascript 网页上跳动的文字

跳动的文字 var r=0 var a=11,b=9,c=7,d=10,e=11,f=8; var y2=-25,y1=-25,y3=-25,y4=-25,y5=-25,y6=-25; var x1=305,x2=335,x3=365,x4=395,x5=425,x6=455; function setVariables(){ if (navigator.appName == "Netscape") { horz=".left"; vert=".top&q
Javascrip实现文字跳动特效

一.如何让字符串变成一个个的字体,让我们去控制 1获取字符串内容 2清空字符串内容 3遍历字符串, 然后一个个的切割出来. 4给切割出来的文字添加定位 5把添加好定位的文字,重新赋值到获取的元素里面. 二.鼠标滑动上去之后, 该怎么去实现文字的跳动 1 定义一个变量0 2 定义定时器 3让变量不断的减少 4改变元素的top == 变量 5当变量达到一定高度的时候,让变量不断的增加 6 当变量减少到0(本身位置) 的时候, 7清除动画改变元素的top = 0(本身位置) <!D
js实现文字闪烁特效的方法

本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码如下 <html> <head> <meta charset="gb2312" /> <title>js实现文字闪烁特效</title> </head> <script> var flag = 0; fun
文字模糊特效

文字模糊特效 var thissize=11 var textfont="Verdana" var textcolor= new Array() textcolor[0]="EEEEEE" textcolor[1]="DDDDDD" textcolor[2]="CCCCCC" textcolor[3]="AAAAAA" textcolor[4]="888888" textcolor[5]
JS溶解形式的文字切换特效

JS溶解形式的文字切换特效 messages = new Array() messages[0] = "我们,都知道吧?" messages[1] = "我们更关注开源,欢迎发布开源源代码" messages[2] = "提供给你一个有质量的源代码资料站" mescolor = new Array() mescolor[0] = "000000" mescolor[1] = "FF0000" mescolo
基于JS简单实现手持弹幕功能+文字抖动特效代码

前段时间抖音上有个抖动弹幕挺火的,于是决定仿写一个,话不多说,先看效果- 效果展示 GIF图看着有点模糊,但实际效果还是不错的. 第一眼看上去也不知道该咋做,那就先把要实现的功能拆解一下吧. 生成一个铺满全屏的黑色背景,写上文字,然后内容居中实现无缝滚动实现文字抖动特效旋转90度(默认横屏展示) 代码如下 .html <div class="barrage-box"> <div class="text">抖动字幕</div>
JavaScript+Canvas实现文字粒子流特效

目录动手前思考绘制文字获取像素点位渲染粒子简单的动画效果 1.随机选择四个方向中的某一个方向,生成初始坐标 2.从初始位置运动到实际位置 3.点击文字炸开的特效动手前思考首先要在特定的位置生成粒子,要获取到canvas上像素的点位,通过canvas的getImageData函数我们可以得到canvas像素点的信息,获取像素点中透明度大于0的位置. 绘制文字新建一个canvas画布,在画布上绘制任意的文字 ctx.font = "200px Arial"; ctx.fon
JS旋转的彩色文字轮转特效

文字旋转 Phrase="我们是共和国的接班人--" Balises="" Taille=40; Midx=100; Decal=0.5; Nb=Phrase.length; y=-10000; for (x=0;x' + Phrase.charAt(x) + '' } document.write (Balises); Time=window.setInterval("Alors()",10); Alpha=5; I_Alpha=0.05; f
JS CSS制作饱含热情的镶边文字闪烁特效

文字闪烁 function glowit(which){ if (document.all.glowtext[which].filters[0].strength==2) document.all.glowtext[which].filters[0].strength=1 else document.all.glowtext[which].filters[0].strength=2 } function glowit2(which){ if (document.all.glowtext.filt
基于JavaScript制作霓虹灯文字代码特效

示例一: 运行效果截图如下: 具体代码如下: http-equiv="Content-Type" content="text/html; charset=gb2312"> 霓虹灯 var Tname="欢迎您的到来!"; var Tlen=Tname.length; document.write(""+Tname+""); var col=new Array("#FFCC00",&
Js文字背景行如流水特效

行如流水的Js文字背景特效 var message="我们是一个专业的收集各类脚本学习资料的网站 jb51.net" var n=0; if (document.all){ document.write('') for (m=0;m'+message.charAt(m)+'') document.write('') var tempref=document.all.neonlight } else document.write(message) function neon(){ if

Javascrip实现文字跳动特效

相关推荐

随机推荐