js實(shí)現(xiàn)圖片漂浮效果的方法
更新時(shí)間：2015年03月02日 10:13:08 作者：開心就是最好
這篇文章主要介紹了js實(shí)現(xiàn)圖片漂浮效果的方法,實(shí)例分析了javascript實(shí)現(xiàn)圖片漂浮的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)圖片漂浮效果的方法。分享給大家供大家參考。具體分析如下：
描述：打開網(wǎng)頁(yè)就看到不停在飄動(dòng)的圖片，點(diǎn)擊連接到其他頁(yè)面；起到著重強(qiáng)調(diào)的效果！
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
#All{ width: 100%; height: 3000px;}
</style>
</head>
<body>
<div id="All">
<div id="img" style="position: absolute; z-index:99;">
<a href="#" target="_blank"><img src="Images/OPVTI.jpg" border="0" style="cursor: pointer;" style="cursor: pointer;" /></a>
<script language="JavaScript">
<!--Begin
var xPos = document.body.clientWidth - 20;
var yPos = document.body.clientHeight / 2;
var step = 1;
var delay = 10;
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);
}
function pause_resume() {
if (pause) {
clearInterval(interval);
pause = false;
} else {
interval = setInterval('changePos()', delay);
pause = true;
}
}
start();
// End -->
</script>
</div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
#All{ width: 100%; height: 3000px;}
</style>
</head>
<body>
<div id="All">
<div id="img" style="position: absolute; z-index:99;">
<a href="#" target="_blank"><img src="Images/OPVTI.jpg" border="0" style="cursor: pointer;" style="cursor: pointer;" /></a>
<script language="JavaScript">
<!--Begin
var xPos = document.body.clientWidth - 20;
var yPos = document.body.clientHeight / 2;
var step = 1;
var delay = 10;
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);
}
function pause_resume() {
if (pause) {
clearInterval(interval);
pause = false;
} else {
interval = setInterval('changePos()', delay);
pause = true;
}
}
start();
// End -->
</script>
</div>
</div>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 用javascript實(shí)現(xiàn)的圖片馬賽克后顯示并切換加文字功能
- 用javascript實(shí)現(xiàn)圖片馬賽克后顯示并切換
- JS實(shí)現(xiàn)圖片高斯模糊切換效果的焦點(diǎn)圖實(shí)例
- Javascript實(shí)現(xiàn)圖片加載從模糊到清晰顯示的方法
- js圖片模糊切換顯示特效的方法
- js放大鏡放大圖片效果
- JavaScript圖片放大鏡效果代碼[代碼比較簡(jiǎn)單]
- js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
- 純JS實(shí)現(xiàn)旋轉(zhuǎn)圖片3D展示效果
- JavaScript 圖片放大鏡（可拖放、縮放效果）
- JS實(shí)現(xiàn)馬賽克圖片效果完整示例
相關(guān)文章
純JavaScript實(shí)現(xiàn)HTML5 Canvas六種特效濾鏡示例
實(shí)現(xiàn)了六款簡(jiǎn)單常見HTML5 Canvas特效濾鏡，并且封裝成一個(gè)純JavaScript可調(diào)用的API文件gloomyfishfilter.js，程序源代碼如下，感興趣的朋友可以參考下哈2013-06-06
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(二)：隊(duì)列
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(二)：隊(duì)列,隊(duì)列是只允許在一端進(jìn)行插入操作,另一個(gè)進(jìn)行刪除操作的線性表,隊(duì)列是一種先進(jìn)先出（First-In-First-Out，F(xiàn)IFO）的數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下2015-06-06
JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口的方法,實(shí)例分析了javascript操作窗口層的技巧,需要的朋友可以參考下2015-03-03
Javascript動(dòng)態(tài)創(chuàng)建div的方法
這篇文章主要介紹了Javascript動(dòng)態(tài)創(chuàng)建div的方法,是javascript節(jié)點(diǎn)操作的典型應(yīng)用,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
this是Javascript語(yǔ)言的一個(gè)關(guān)鍵字。它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用。接下來(lái)通過(guò)本文給大家分享JavaScript中var that=this所代表的意思，需要的朋友參考下吧2017-02-02
Bootstrap 最常用的JS插件系列總結(jié)（圖片輪播、標(biāo)簽切換等）
這篇文章主要為大家詳細(xì)介紹了Bootstrap 最常用的JS插件，包括圖片輪播carousel.js、標(biāo)簽切換tab.js、滾動(dòng)監(jiān)聽scrollspy.js等，感興趣的小伙伴們可以參考一下2016-07-07
在JavaScript中正確引用bind方法的應(yīng)用
本文的重點(diǎn)在于討論bind()方法的實(shí)現(xiàn)，在開始討論bind()的實(shí)現(xiàn)之前，我們先來(lái)看看bind()方法的使用，有需要的小伙伴可以參考下。2015-05-05
JS中循環(huán)字符串拼接時(shí)加換行問(wèn)題
這篇文章主要介紹了JS中循環(huán)字符串拼接時(shí)加換行問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
JavaScript實(shí)現(xiàn)簡(jiǎn)易加法計(jì)算器
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易加法計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript數(shù)學(xué)對(duì)象Math操作數(shù)字的方法
這篇文章主要為大家介紹了JavaScript數(shù)學(xué)對(duì)象Math操作數(shù)字的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05