📄 图片组成的文字.txt
字号:
要完成此效果需要两个步骤
第一步：把如下代码加入到<head>区域中
<script language="javascript">
var n = (document.layers) ? 1:0
var ie = (document.all) ? 1:0
var range = "";
var styleObj = "";
//the block
var letter = new Array(82);
for (m=0; m<=82; m++) {
letter[m] = "b" + m; }
//where the block starts
var yplace = new Array(82);
for (m=0; m<=82; m++) {
yplace[m] = -60; }
//where the block ends
var ymax = new Array(320,312,304,296,296,288,280,272,272,256,248,299,275,275,251,235,278,270,262,254,254,230,222,214,206,257,241,233,209,185,236,228,220,212,188,180,172,164,206,182,182,174,166,158,158,142,126,185,161,137,137,121,105,164,156,148,140,140,132,124,116,116,100,84,143,119,119,95,79,63,122,114,106,98,98,90,82,74,74,66,58,50,42);
//when the block starts to slow down.
var slower = new Array(270,262,254,246,246,238,230,222,222,206,198,249,225,225,201,185,228,220,212,204,204,180,172,164,156,207,191,182,159,135,186,178,170,162,138,130,122,114,156,132,132,124,116,108,108,92,76,135,111,87,87,71,55,114,106,98,90,90,82,74,66,66,50,34,93,69,69,45,29,13,72,64,56,48,48,40,32,24,24,16,8,0,-8);
//horizontal position of block
var xplace = new Array(75,91,107,123,157,173,189,205,239,271,287,75,123,157,239,271,75,91,107,123,157,239,255,271,287,75,107,157,239,287,75,91,107,157,239,255,271,287,59,107,141,157,173,189,223,255,287,59,107,189,223,255,287,59,75,91,107,141,157,173,189,223,255,287,59,107,141,223,255,287,59,75,91,107,141,157,173,189,223,239,255,271,287);
//block speed
var speed = new Array(82);
for (m=0; m<=82; m++) {
speed[m] = 10 }
//ie object styles
if (ie) {
range = "all.";
styleObj = ".style";
}
//------end vars
function shiftTo(obj, x, y) {
if (n) {
obj.moveTo(x,y);
}
else {
obj.pixelLeft = x;
obj.pixelTop = y;
}
}
function redraw() {
// derived from Webmonkey CSS fix. Modified for use on ASMBLR, Mar 15, 2000
if (document.ASMBLR.redraw.winWidth != window.innerWidth || document.ASMBLR.redraw.winHeight != window.innerHeight) {
document.location = document.location;
}
}
function redrawInit() {
// derived from Webmonkey CSS fix. Modified for use on ASMBLR, Mar 15, 2000
if (n) {
document.ASMBLR = new Object;
document.ASMBLR.redraw = new Object;
document.ASMBLR.redraw.winWidth = window.innerWidth;
document.ASMBLR.redraw.winHeight = window.innerHeight;
window.onresize = redraw();
}
}
function getObject(obj) {
var theObj = eval("document." + range + obj + styleObj);
return theObj;
}
function gravity(num) {
var theObj = getObject(letter[num]);
if (yplace[num] < ymax[num]) {
if (slower[num] < yplace[num] && speed[num] > 1) speed[num]--;
yplace[num] = yplace[num]+speed[num];
if (yplace[num] > ymax[num]) yplace[num] = ymax[num];
shiftTo(theObj, xplace[num], yplace[num]);
setTimeout("gravity(" + num + ")",10);
}
}
function init() {
redrawInit();
for (i = 0; i <= 82; i++) {
setTimeout("gravity(" + i + ")",i*88);
}
}
//-->
</script>
第二步：把如下代码加入到<body>区域中
<body onLoad="init();">
<div id="b0" style="position:absolute; width:34px; height:38px; z-index:11; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b1" style="position:absolute; width:34px; height:38px; z-index:10; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b2" style="position:absolute; width:34px; height:38px; z-index:9; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b3" style="position:absolute; width:34px; height:38px; z-index:8; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b4" style="position:absolute; width:34px; height:38px; z-index:7; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b5" style="position:absolute; width:34px; height:38px; z-index:6; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b6" style="position:absolute; width:34px; height:38px; z-index:5; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b7" style="position:absolute; width:34px; height:38px; z-index:4; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b8" style="position:absolute; width:34px; height:38px; z-index:3; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b9" style="position:absolute; width:34px; height:38px; z-index:2; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b10" style="position:absolute; width:34px; height:38px; z-index:1; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b11" style="position:absolute; width:34px; height:38px; z-index:16; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b12" style="position:absolute; width:34px; height:38px; z-index:15; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b13" style="position:absolute; width:34px; height:38px; z-index:14; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b14" style="position:absolute; width:34px; height:38px; z-index:13; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b15" style="position:absolute; width:34px; height:38px; z-index:12; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b16" style="position:absolute; width:34px; height:38px; z-index:25; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b17" style="position:absolute; width:34px; height:38px; z-index:24; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b18" style="position:absolute; width:34px; height:38px; z-index:23; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b19" style="position:absolute; width:34px; height:38px; z-index:22; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b20" style="position:absolute; width:34px; height:38px; z-index:21; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b21" style="position:absolute; width:34px; height:38px; z-index:20; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b22" style="position:absolute; width:34px; height:38px; z-index:19; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b23" style="position:absolute; width:34px; height:38px; z-index:18; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b24" style="position:absolute; width:34px; height:38px; z-index:17; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b25" style="position:absolute; width:34px; height:38px; z-index:30; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b26" style="position:absolute; width:34px; height:38px; z-index:29; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b27" style="position:absolute; width:34px; height:38px; z-index:28; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b28" style="position:absolute; width:34px; height:38px; z-index:27; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b29" style="position:absolute; width:34px; height:38px; z-index:26; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b30" style="position:absolute; width:34px; height:38px; z-index:38; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b31" style="position:absolute; width:34px; height:38px; z-index:37; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b32" style="position:absolute; width:34px; height:38px; z-index:36; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b33" style="position:absolute; width:34px; height:38px; z-index:35; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b34" style="position:absolute; width:34px; height:38px; z-index:34; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b35" style="position:absolute; width:34px; height:38px; z-index:33; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b36" style="position:absolute; width:34px; height:38px; z-index:32; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b37" style="position:absolute; width:34px; height:38px; z-index:31; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b38" style="position:absolute; width:34px; height:38px; z-index:47; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b39" style="position:absolute; width:34px; height:38px; z-index:46; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b40" style="position:absolute; width:34px; height:38px; z-index:45; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b41" style="position:absolute; width:34px; height:38px; z-index:44; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b42" style="position:absolute; width:34px; height:38px; z-index:43; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b43" style="position:absolute; width:34px; height:38px; z-index:42; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b44" style="position:absolute; width:34px; height:38px; z-index:41; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b45" style="position:absolute; width:34px; height:38px; z-index:40; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b46" style="position:absolute; width:34px; height:38px; z-index:39; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b47" style="position:absolute; width:34px; height:38px; z-index:53; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b48" style="position:absolute; width:34px; height:38px; z-index:52; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b49" style="position:absolute; width:34px; height:38px; z-index:51; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b50" style="position:absolute; width:34px; height:38px; z-index:50; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b51" style="position:absolute; width:34px; height:38px; z-index:49; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b52" style="position:absolute; width:34px; height:38px; z-index:48; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b53" style="position:absolute; width:34px; height:38px; z-index:64; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b54" style="position:absolute; width:34px; height:38px; z-index:63; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b55" style="position:absolute; width:34px; height:38px; z-index:62; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b56" style="position:absolute; width:34px; height:38px; z-index:61; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b57" style="position:absolute; width:34px; height:38px; z-index:60; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b58" style="position:absolute; width:34px; height:38px; z-index:59; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b59" style="position:absolute; width:34px; height:38px; z-index:58; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b60" style="position:absolute; width:34px; height:38px; z-index:57; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b61" style="position:absolute; width:34px; height:38px; z-index:56; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b62" style="position:absolute; width:34px; height:38px; z-index:55; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b63" style="position:absolute; width:34px; height:38px; z-index:54; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b64" style="position:absolute; width:34px; height:38px; z-index:70; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b65" style="position:absolute; width:34px; height:38px; z-index:69; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b66" style="position:absolute; width:34px; height:38px; z-index:68; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b67" style="position:absolute; width:34px; height:38px; z-index:67; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b68" style="position:absolute; width:34px; height:38px; z-index:66; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b69" style="position:absolute; width:34px; height:38px; z-index:65; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b70" style="position:absolute; width:34px; height:38px; z-index:83; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b71" style="position:absolute; width:34px; height:38px; z-index:82; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b72" style="position:absolute; width:34px; height:38px; z-index:81; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b73" style="position:absolute; width:34px; height:38px; z-index:80; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b74" style="position:absolute; width:34px; height:38px; z-index:79; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b75" style="position:absolute; width:34px; height:38px; z-index:78; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b76" style="position:absolute; width:34px; height:38px; z-index:77; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b77" style="position:absolute; width:34px; height:38px; z-index:76; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b78" style="position:absolute; width:34px; height:38px; z-index:75; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b79" style="position:absolute; width:34px; height:38px; z-index:74; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b80" style="position:absolute; width:34px; height:38px; z-index:73; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b81" style="position:absolute; width:34px; height:38px; z-index:72; left: 50px; top: -60px">
<img src="22.gif" >
</div>
<div id="b82" style="position:absolute; width:34px; height:38px; z-index:71; left: 50px; top: -60px">
<img src="22.gif" >
</div>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -