js实现图片漂浮效果的方法

内容摘要

本文实例讲述了js实现图片漂浮效果的方法。分享给大家供大家参考。具体分析如下：
描述：打开网页就看到不停在飘动的图片，点击连接到其他页面；起到着重强调的效果！
复制代码代码

文章正文

本文实例讲述了js实现图片漂浮效果的方法。分享给大家供大家参考。具体分析如下：

描述：打开网页就看到不停在飘动的图片，点击连接到其他页面；起到着重强调的效果！

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

希望本文所述对大家的javascript程序设计有所帮助。

代码注释

上一篇 Android实现SQLite添加、更新及删除行的方法下一篇 Win10系统总是提示IP地址冲突该怎么解决?

作者：喵哥笔记

学的不仅是技术，更是梦想！