Javascript實現帶關閉按鈕的網頁漂浮廣告代碼

更新時間：2014年01月12日 16:42:12 作者：

帶有關閉功能的漂浮圖片的實現方法有很多，下面為大家介紹下使用Javascript是如何實現的，喜歡的額朋友可以了解下

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>帶關閉按鈕的網頁漂浮廣告代碼</title> 
</head> 
<body> 
<div id="img" style="position: absolute; left: 311; top: 815;visibility :hidden;" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="right"> 
<a href="#" target="_blank"><img border="0" src="圖片路徑" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a> 
<span style="CURSOR:hand;color:red;font-weight:bold" onclick="clearInterval(interval);img.style.visibility = 'hidden'">X</span> 
</div> 
<script language=javascript src=ff.js> 

</script> 
</body> 
</html> 

ff.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.style.visibility = "visible"; 
interval = setInterval('changePos()', delay); 
} 
start(); 

您可能感興趣的文章:

詳解js中call與apply關鍵字的作用
本文主要介紹js中call與apply關鍵字的作用以及它們的用法,具體實例如下,希望對大家有所幫助
2016-11-11
JavaScript?文件優(yōu)化全面指南
本文將探討實用的?JavaScript?文件優(yōu)化技術、如何處理與?JavaScript?文件相關的性能問題以及幫助優(yōu)化過程的工具,你將獲得提升web應用程序速度的相關知識,從而為你的用戶提供無縫體驗
2023-12-12
webpack學習--webpack經典7分鐘入門教程
這篇文章主要介紹了webpack學習--webpack經典7分鐘入門教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
javascript文本框內輸入文字倒計數的方法
這篇文章主要介紹了javascript文本框內輸入文字倒計數的方法,涉及javascript針對鍵盤事件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
微信小程序開發(fā)探究
這篇文章主要介紹了微信小程序開發(fā)探究,非常具有實用價值，需要的朋友可以參考下。
2016-12-12
js判斷是否為數組的函數: isArray()
像 Ajaxian，StackOverflow 等，搜一下，到處都在討論 isArray() 的實現。對于一切都是對象的 JavaScript 來說，確實有點麻煩
2011-10-10
純JS實現彈性導航條效果
本文主要介紹了純JS實現彈性導航條效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
動態(tài)統(tǒng)計當前輸入內容的字節(jié)、字符數的實例詳解
這篇文章主要介紹了動態(tài)統(tǒng)計當前輸入內容的字節(jié)、字符數的實例詳解的相關資料,希望通過本文能幫助到大家，讓大家實現這樣的功能，需要的朋友可以參考下
2017-10-10
詳解JavaScript數組的操作大全
這篇文章主要給大家介紹js數組的操作，數組的創(chuàng)建，數組元素的發(fā)那個吻，數組元素的添加，數組元素的刪除，數組的截取和合并，數組的拷貝，數組元素的排序，數組元素的字符串化等知識，對js數組的操作感興趣的朋友可以參考下本篇文章
2015-10-10
js中[]、{}、()區(qū)別示例淺析
很多人都知道在js中[]表示的是數組對象,{}表示的是對象,但是這兩者的區(qū)別卻說不出來,下面這篇文章主要給大家介紹了關于js中[]、{}、()區(qū)別的相關資料,需要的朋友可以參考下
2023-06-06