javascript特效：飄動的圖片

2019-11-18 13:27:42

字體：大中小

來源：轉載

供稿：網友

　　首先我們自己動手做一張背景為透明色的圖片，格式可以自己定制，但最好是GIF動畫的，這樣可以增加動感效果，再把以下代碼加入到Html的任意位置，注重：把連接地址“href=”和圖片的位置“src=”填寫好。
　　
　　＜div id="img" style="position:absolute;"＞
　　＜a href="路徑/*.htm"＞＜img src="路徑/*.gif"border="0"＞＜/a＞
　　＜/div>
　　
　　　　然后把以下代碼復制到你的記事本里，選擇文件->另存為，在輸入框中鍵入"piao.js"（注重：引號千萬不能少，以便保證你存儲的文件的括展名是.js）
　　
　　　
　　
　　＜!--
　　var XPos = 20;
　　var yPos = document.body.clientHeight;
　　var step = 1;
　　var delay = 30;
　　var height = 0;
　　var Hoffset = 0;
　　var Woffset = 0;
　　var yon = 0;
　　var xon = 0;
　　var pause = true;
　　var interval;
　　img.style.top = yPos;
　　function changePos() {
　　width = document.body.clientWidth;
　　height = document.body.clientHeight;
　　Hoffset = img.offsetHeight;
　　Woffset = img.offsetWidth;
　　img.style.left = xPos + document.body.scrollLeft;
　　img.style.top = yPos + document.body.scrollTop;
　　if (yon) {
　　yPos = yPos + step;
　　}
　　else {
　　yPos = yPos - step;
　　}
　　if (yPos ＜ 0) {
　　yon = 1;
　　yPos = 0;
　　}
　　if (yPos >= (height - Hoffset)) {
　　yon = 0;
　　yPos = (height - Hoffset);
　　}
　　if (xon) {
　　xPos = xPos + step;
　　}
　　else {
　　xPos = xPos - step;
　　}
　　if (xPos ＜ 0) {
　　xon = 1;
　　xPos = 0;
　　}
　　if (xPos >= (width - Woffset)) {
　　xon = 0;
　　xPos = (width - Woffset);
　　}
　　}
　　function start() {
　　img.visibility = "visible";
　　interval = setInterval('changePos()', delay);
　　}
　　start();
　　// End --＞

上一篇：JavaScript的編程

下一篇：JavaScript在E-mail中的應用