快捷導(dǎo)航

Javascript實(shí)現(xiàn)帶關(guān)閉按鈕的網(wǎng)頁(yè)漂浮廣告代碼

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

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

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>帶關(guān)閉按鈕的網(wǎng)頁(yè)漂浮廣告代碼</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代碼

復(fù)制代碼代碼如下:

 
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(); 

您可能感興趣的文章:

相關(guān)文章

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