Rumah > hujung hadapan web > tutorial js > Kesan pembesaran sfera teks JS kemahiran perkongsian kod_javascript

Kesan pembesaran sfera teks JS kemahiran perkongsian kod_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 15:44:09
asal
1798 orang telah melayarinya

Kesan kaca pembesar yang sejuk bagi teks pembesar adalah hebat!

Tunjukkan pemaparan dahulu:

Mari kita jalankan kod tersebut dan cuba dahulu-------------------------------------- Demonstrasi Kesan------------------------------------------ ---

Kod khusus adalah seperti berikut

<html>
<head>
<title>JS文字球状放大效果</title>
<meta http-equiv="imagetoolbar" content="no">
<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>

<script type="text/javascript"><!--

T = "What is real&#63;How do you define real&#63; Ifyou're talkingabout what youcan feel whatyou can smellwhat you cantaste and seethen real issimply electrical signalsinterpreted byyour brain! ";
I = 0;
o = new Array();
xm = -1000;
ym = -1000;
///////////////
rad = 80;
dim = 200;
///////////////
W = 0;
H = 0;
NX = 14;
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;
}
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);
}

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;j<NY;j++){
 for(var i=0;i<NX;i++){
 c=T.charAt((I++)%T.length).toUpperCase();
 if(c==" ")c="·";
 o[K] = new CObj(K++,i,j,c);
 }
 }
 run();
}
//-->
</script>
</head>

<body>
<span style="position:absolute;left:50%;top:50%">
 <span id="doot"></span>
</span>

</body>
</html>
Salin selepas log masuk

Jika anda ingin mencapai kesan hebat ini, cuma salin kod dan jalankan , cubalah atau buat beberapa lagi inovasi.

Di atas ialah kod kesan pembesaran sfera teks JavaScript yang dikongsi dengan anda.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan