動態HTML技術精彩實例
- 發布于：2019-07-25
- 共 266 人圍觀
下面介紹幾個精彩實例，以饗讀者。
一、飛行的圖片
在<head>中適當位置加入如下代碼：
<script language="javascript">
<!--
var left=0;
var top=200;
var stepx=2;
function jump()
{
left=left+stepx;
if(left>710) stepx=-2;
if(-left>0) stepx=2;
sign.style.left=left;
sign.style.top=top;
timeID=setTimeout("jump()",100);
}
-->
</script>
<body>改為<body onload="t=setTimeout('jump()',20)">,然后在body后適當位置加入如下代碼：
<div id="sign" style="position:absolute;left:0;top:200;width:135;">
<img src="myphoto.jpg" width="56" height="44" >
</div>
這樣，選定的圖片就會在窗口中上部從左往右飛行，碰到右邊界向左飛行，不斷循環。
二、彈簧文字
在<head>中適當位置加入如下代碼：
<script language="javascript">
<!--
var sizes=new Array("-2px","-1px","0px","1px","2px","3px","4px",
"5px","6px","7px","8px","9px","10px","11px","12px","13px");
sizes.pos=0;
function rubberBand()
{
var el=document.all.elastic;
if(null==el.direction)
el.direction=1;
else if((sizes.pos>sizes.length-2)||(0==sizes.pos))
el.direction*=-1;
el.style.letterSpacing=sizes[sizes.pos+=el.direction];
}
-->
</script>
<body>改為<body onload="setInterval('rubberBand()',150)">,然后在body后適當位置加入如下代碼：
<center>
<h2 id="elastic">彈簧文字
</h2>
</center>
當然可在上述代碼中加入文字的大小和顏色等，文字就會像彈簧一樣左右伸縮。
三、強制瀏覽者點擊某鏈接
現今很多個人主頁都在做廣告，可苦于游覽者往往不會主動點擊廣告鏈接。如果你的主頁有個項目做得不錯，如“軟件下載”一欄提供不少好的軟件，可瀏覽者盡下載軟件，沒有給你一個好處。你現在可以通過下面方法強制瀏覽者先點擊廣告，再進入下載頁面下載軟件。
在body后加入如下代碼:
<script language="javascript">
<!--
var Flag=0
-->
</script>
假如你的廣告鏈接圖為"1.jpg",鏈接網址為"http://www.1.com",則應采用如下代碼：
<a target="_blank" onclick="Flag=1;return true">
<img src="1.jpg" border="0" height="" width="">
</a>
然后你才想讓瀏覽者進入你的網頁"download.htm",則加入如下代碼：
<a href="download.htm" target="_blank" ；
onclick="if(Flag==1) return true; else {alert('如果您想從本站下載軟件，請先點擊上面的廣告，再把它最小化，這不會影響您的瀏覽，多謝！'); return false}" onmouseover="return true">軟件下載
</a>
注意：上面alert后的內容在編寫時不能斷行，否則會出錯。
標簽：
