快捷導(dǎo)航

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)頁就看到不停在飄動(dòng)的圖片，點(diǎn)擊連接到其他頁面；起到著重強(qiáng)調(diào)的效果！

<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>