js文字特效（js 给页面内文字高光特效）

本文目录

• js 给页面内文字高光特效
• js+css实现文字散开重组动画特效代码分享
• js图片鼠标经过出现文字的特效html求教
• 有没有js代码让文字有发光效果

js 给页面内文字高光特效

如果不想动复制过来的内容，（可能内容比较多，也不好找，改动又可能会影响其他）
那就将你自己写的div 都添加一个class， 设置文字格式，如font-size,font-color等。
《div class=“norm“》blabla《/div》
style里可能需要这些：
.norm {
font-family:Verdana, Geneva, sans-serif;
size:12px;
color:black;
opacity:1;
moz-opacity:1;
filter:false;
}

js+css实现文字散开重组动画特效代码分享

文字散开重组动画这款特效我们可以在输入框中指定任意文字，点击确定按钮后，就会将原先的文字爆炸散去，新的文字以像素点的形式组合起来，看起来非常棒。
运行效果图：
这是输入HAPPY后安按钮后效果，当然可以随便输文字
好酷的特效，连中文都支持，看如下图：
为大家分享的文字散开重组动画特效代码如下
《html》
《head》
《meta
charset=“UTF-8“》
《title》文字散开重组动画特效《/title》
《link
rel=“stylesheet“
href=“css/style.css“
media=“screen“
type=“text/css“
/》
《/head》
《body》
《canvas
id=“text“
width=“500“
height=“100“》《/canvas》
《canvas
id=“stage“
width=“500“
height=“100“》《/canvas》
《form
id=“form“》
《input
type=“text“
id=“inputText“
value=“脚本之家“
/》
《input
type=“submit“
value=“TRY
IT“
/》
《/form》
《script
src=’js/EasePack.min.js’》《/script》
《script
src=’js/TweenLite.min.js’》《/script》
《script
src=’js/easeljs-0.7.1.min.js’》《/script》
《script
src=’js/requestAnimationFrame.js’》《/script》
《script
src=“js/index.js“》《/script》
《/body》
《/html》
以上就是为大家分享的js+css实现文字散开重组动画特效代码，希望大家可以喜欢。

js图片鼠标经过出现文字的特效html求教

如果是纯色的方块，你直接用css就能实现，如果不是的话，就用js吧，css的话，你先把字体颜色设置成和方块背景一样的，然后写一个：hover的属性，就是鼠标经过时的属性，这时候你把背景变暗，然后文字颜色改变一下就好。js的话，写一个mouseover的事件，先让文字处于display：none；的状态，经过时，变成display：block；这样。

有没有js代码让文字有发光效果

《!DOCTYPE HTML》    
《html》    
《head》    
《title》《/title》
《style type=“text/css“》    
html { overflow: hidden; }    
body { position: absolute; margin: 0px; padding: 0px; background: #000; width: 100%; height: 100%; }    
#bump { position: absolute; border: #222 solid 1px; width: 530px; height: 100px; margin-left: -265px; margin-top: -50px; left: 50%; top: 50%; }    
#bump span { position: absolute; font-size: 1px; cursor: pointer; }    
#ch { position: absolute; border-top: #222 solid 1px; left: 0; width: 100%; }    
#cv { position: absolute; border-left: #222 solid 1px; top: 0; height: 100%; }    
《/style》    
《script type=“text/javascript“》 
var bmp = function () {    
// private vars    
var object  = ,    
ZOOMx,    
ZOOMy,    
xm,    
ym,    
nx,    
ny,    
cx,    
cy,    
Nx,    
Ny,    
L,    
T,    
W,    
H,    
SP,    
cH,    
cV,    
N  = 1,    
iL = 1,    
iP = 2,    
M  = 200,    
kA = 0,    
S  = 100;    
var resize = function () {    
nx = document.body.offsetWidth / 2;    
ny = document.body.offsetHeight / 2;    
W = SP.offsetWidth;    
H = SP.offsetHeight;    
L = SP.offsetLeft;    
T = SP.offsetTop;    
};    
var init = function (bump) {    
document.onselectstart = new Function(“return false“);    
document.onmousedown = function(){ iL = 2; iP = 4; };    
document.onmouseup = function(){ iL = 1; iP = 2;};    
document.onmousemove = function(e){    
if (!e) e = window.event;    
xm = (e.x || e.clientX);    
ym = (e.y || e.clientY);    
S = 10;    
M = 200;    
return false;    
};    
onresize = resize;    
var sb = function(c ,x ,y) {    
bump[y] = bump[y].substring(0,x) + c+bump[y].substring(x+1,999);    
};    
var b = function(x, y) {    
return bump[y].charAt(x);    
};    
SP = document.getElementById(“bump“);    
cH = document.getElementById(“ch“);    
cV = document.getElementById(“cv“);    
Ny = bump.length;    
Nx = bump.length;    
resize();    
ZOOMx = Math.floor(W / Nx);    
ZOOMy = Math.floor(H / Ny);    
ym = T + ZOOMx * Ny / 2;    
cx = xm = L + ZOOMy * Nx / 2;    
cy = -200;    
// set shadows    
for(var i = 1; i 《 Ny-1; i++) {    
for(var j = 1; j 《 Nx-1; j++) {    
if (b(j,i) === “O“) {    
if (b(j,i+1)   === “ “) sb(“-“,j,i+1);    
if (b(j+1,i+1) === “ “) sb(“-“,j+1,i+1);    
if (b(j+1,i)   === “ “ || b(j+1,i)    === “-“) sb(“!“,j+1,i);    
if (b(j+1,i)   === “!“ && (b(j+1,i-1) === “ “ || b(j+1,i-1) === “-“)) sb(“!“,j+1,i-1);    
if (b(j,i-1)   === “ “ || b(j,i-1)    === “I“) sb(“=“,j,i-1);    
if (b(j,i-1)   === “=“ && (b(j-1,i-1) === “ “ || b(j-1,i-1) === “I“)) sb(“=“,j-1,i-1);    
if (b(j-1,i)   === “ “ || b(j-1,i)    === “-“) sb(“I“,j-1,i);    
if (b(j-1,i)   === “I“ && (b(j-1,i+1) === “ “ || b(j-1,i+1) === “-“)) sb(“I“,j-1,i+1);    
}    
}    
}    
// compression spans    
for(var i=0; i 《 Ny; i++) {    
var w = 0;    
for(var j = 0; j 《 Nx; j++) {    
var c = bump[i].charAt(j);    
if (c != “ “){    
var x = j,    
y = i,    
k = j,    
w = 0,    
h = 1,    
m = i,    
cs = ““,    
cr = c;    
do {    
k++;    
w++;    
cs += cr;    
cr = bump[i].charAt(k);    
} while (cr == c && k 《 Nx);    
if (i 《 Ny-1){    
do {    
m++;    
if (bump[m].substring(j,j+w) == cs) {    
h++;    
bump[m] = bump[m].substring(0,j) +    
cs.replace(RegExp(c,“gi“),“ “) +    
bump[m].substring(j+w,999);    
} else cs = ““;    
} while (cs!=““ && m 《 Ny-1);    
}    
object.push(    
new CObj(c, x, y, w, h)    
);    
j += w-1;    
}    
}    
}    
mainloop();    
};    
var CObj = function(c, x, y, w ,h) {    
var M1 = {    
“O“: 0,    
“I“: 1,    
“!“: -1,    
“=“: 0,    
“-“: 0    
},    
M2 = {    
“O“: 0,    
“I“: 0,    
“!“: 0,    
“=“: 1,    
“-“: -1    
},    
M3 = {    
“O“: 180,    
“I“: 115,    
“!“: 115,    
“=“: 115,    
“-“: 115    
};    
this.c  = c;    
this.x  = ZOOMx * x;    
this.y  = ZOOMy * y;    
this.m1 = M1[c];    
this.m2 = M2[c];    
this.m3 = M3[c];    
this.O  = document.createElement(“span“);    
this.O.style.left   = Math.round(this.x) + “px“;    
this.O.style.top    = Math.round(this.y) + “px“;    
this.O.style.width  = Math.round(ZOOMx * w) + “px“;    
this.O.style.height = Math.round(ZOOMy * h) + “px“;    
SP.appendChild(this.O);    
};    
CObj.prototype.bumpmapping = function() {    
var dx = (cx - this.x - L) / (5 * H) * iP;    
var dy = (cy - this.y - T) / (5 * H) * iP;    
var col = Math.round(    
iL * (255 - Math.floor(    
this.m3 * Math.sqrt(    
(dx + this.m1) * (dx + this.m1) + (dy + this.m2) * (dy + this.m2)    
)    
))    
);    
this.O.style.backgroundColor = “RGB(“ +    
Math.round(col * 2)   + “,“ +    
Math.round(col * 1.5) + “,“ +    
Math.round(col)       + “)“;    
}    
var mainloop = function () {    
if(M-- 《 0){    
S = 100;    
kA -= .01;    
xm = nx + Math.cos(kA) * W * 1;    
ym = ny + Math.sin(kA * 1.1) * H * 2;    
}    
cx += (xm - cx) / S;    
cy += (ym - cy) / S;    
cH.style.top  = Math.round(cy) + “px“;    
cV.style.left = Math.round(cx) + “px“;    
var i = 0, o;    
while ( o = object[i++] ) o.bumpmapping();    
setTimeout(mainloop,16);    
};    
return {    
// public functions    
init: init    
}    
}();    
《/script》    
《/head》    
《body》    
《div id=“ch“》《/div》    
《div id=“cv“》《/div》    
《div id=“bump“》《/div》    
《script type=“text/javascript“》
bmp.init(    
[    
“                                                                  “,    
“ OOOOOOO      OO    OO     OOOOOOOO      OOO    OOO      OO       “,    
“ OOOOOOOO     OO    OO     OOOOOOOO     OOOOOOOOOOOO     OO       “,    
“ OO    OO     OO    OO        OO        OO   OO   OO     OO       “,    
“ OO    OO     OOOOOOOO        OO        OO   OO   OO     OO       “,    
“ OO    OO     OOOOOOOO        OO        OO   OO   OO     OO       “,    
“ OO    OO     OO    OO        OO        OO        OO     OO       “,    
“ OO    OO     OO    OO        OO        OO        OO     OO       “,    
“ OOOOOOOO     OO    OO        OO        OO        OO     OOOOOOOO “,    
“ OOOOOOO      OO    OO        OO        OO        OO     OOOOOOOO “,    
“                                                                  “    
]    
);    
《/script》    
《/body》    
《/html》