本文实例讲述了js实现图片漂浮效果的方法。分享给大家供大家参考。具体分析如下： 描述：打开网页就看到不停在飘动的图片，点击连接到其他页面；起到着重强调的效果！ 复制代码 代码如下: test <br /> #All{ width: 100%; height: 3000px;} <br /> <br /> <!--Begin <br /> var xPos = document.body.clientWidth - 20; <br /> var yPos = document.body.clientHeight / 2; <br /> var step = 1; <br /> var delay = 10; <br /> var height = 0; <br /> var Hoffset = 0; <br /> var Woffset = 0; <br /> var yon = 0; <br /> var xon = 0; <br /> var pause = true; <br /> var interval; <br /> img.style.top = yPos; <br /> function changePos() { <br /> width = document.body.clientWidth; <br /> height = document.body.clientHeight; <br /> Hoffset = img.offsetHeight; <br /> Woffset = img.offsetWidth; <br /> img.style.left = xPos + document.body.scrollLeft; <br /> img.style.top = yPos + document.body.scrollTop; <br /> if (yon) { <br /> yPos = yPos + step; <br /> } else { <br /> yPos = yPos - step; <br /> } <br /> if (yPos < 0) { <br /> yon = 1; <br /> yPos = 0; <br /> } <br /> if (yPos >= (height - Hoffset)) { <br /> yon = 0; <br /> yPos = (height - Hoffset); <br /> } <br /> if (xon) { <br /> xPos = xPos + step; <br /> } else { <br /> xPos = xPos - step; <br /> } <br /> if (xPos < 0) { <br /> xon = 1; <br /> xPos = 0; <br /> } <br /> if (xPos >= (width - Woffset)) { <br /> xon = 0; <br /> xPos = (width - Woffset); <br /> } <br /> } <br /> function start() { <br /> img.visibility = "visible"; <br /> interval = setInterval('changePos()', delay); <br /> } <br /> function pause_resume() { <br /> if (pause) { <br /> clearInterval(interval); <br /> pause = false; <br /> } else { <br /> interval = setInterval('changePos()', delay); <br /> pause = true; <br /> } <br /> } <br /> start(); <br /> // End --> <br /> 希望本文所述对大家的javascript程序设计有所帮助。
