js实现球形放大镜动画效果

来源：互联网 2023-03-16 23:57:35 148

js实现球形放大镜动画效果

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

js实现球形放大镜动画效果

书写hmtl代码。

span style="position:absolute;left:50%;top:50%">

span id="doot">/span>

/span>

js实现球形放大镜动画效果

书写css代码。

style type="text/css">

body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}

span{position:absolute;font-family: verdana; font-weight: bold;}

/style>

js实现球形放大镜动画效果

3该信息非法爬取自百度经验

书写并添加js代码。

script>

var T = "What is real?How do you define real? Ifyou're talkingabout what youcan feel whatyou can smellwhat you cantaste and seethen real issimply electrical signalsinterpreted byyour brain! ";

var I = 0;

var o = new Array();

var xm = -1000;

var ym = -1000;

///////////////

var rad = 80;

var dim = 200;

///////////////

var W = 0;

var H = 0;

var NX = 14;

var NY = 14;

var nx;

var ny;

document.onmousemove = function(e){

if (window.event) e = window.event;

xm = (e.x || e.clientX) - (nx * .5) dim * .5;

ym = (e.y || e.clientY) - (ny * .5) dim * .5;

}

function resize() {

nx = document.body.offsetWidth;

ny = document.body.offsetHeight;

}

window.onresize = resize;

function CObj(N,i,j,c){

this.obj = document.createElement("span");

this.obj.innerHTML = c;

DOOT.appendChild(this.obj);

this.N = N;

this.To = 16;

this.x0 = i*2*W;

this.y0 = j*2*H;

this.anim = true;

this.mainloop = function(){

with (this) {

dx = xm - x0;

dy = ym - y0;

dist = Math.sqrt(dx * dx dy * dy);

if (dist rad) {

anim = true;

M = Math.cos(.5 * Math.PI * Math.abs(dist / rad));

c = Math.round(84 M * 171);

with(obj.style){

left = x0 - dx * M;

top = y0 - dy * M;

zIndex = Math.round(100 M);

fontSize = 8 M * W * 2;

color = "RGB(" c "," c "," c ")";

}

} else {

if(anim){

with(obj.style){

left = x0;

top = y0;

zIndex = 0;

fontSize = 8;

color = "RGB(88,88,88)";

}

anim = false;

}

function run(){

for(i in o)o[i].mainloop();

setTimeout(run,16);

}

window.onload = function (){

DOOT = document.getElementById("doot");

with(DOOT.style){

left = -dim/2;

top = -dim/2;

width = dim;

height = dim;

}

resize();

W = (dim / NX) / 2;

H = (dim / NY) / 2;

K = 0;

for(var j=0;jNY;j ){

for(var i=0;iNX;i ){

c=T.charAt((I )%T.length).toUpperCase();

if(c==" ")c="·";

o[K] = new CObj(K ,i,j,c);

}

run();

}

/script>

js实现球形放大镜动画效果

代码整体结构。

js实现球形放大镜动画效果

查看效果。

js实现球形放大镜动画效果

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JAVASCRIPT

上一篇：JS怎样设置和清除定时器下一篇：如何利用dojo制作柱状图

js实现球形放大镜动画效果

工具/原料

方法/步骤

热门文章

标签列表