当前位置: 首页 > 编程笔记 >

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

邢修明
2023-03-14
本文向大家介绍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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍JS实现图片放大镜效果的方法,包括了JS实现图片放大镜效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现图片放大镜效果的方法。分享给大家供大家参考。具体实现方法如下: 补充:magnifier.js插件点击此处本站下载。 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍首页图片漂浮效果示例代码,包括了首页图片漂浮效果示例代码的使用技巧和注意事项,需要的朋友参考一下

  • 本文向大家介绍js实现图片轮播效果,包括了js实现图片轮播效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲解了js实现图片轮播效果代码,分享给大家供大家参考,具体内容如下 运行代码如下 具体代码如下 插件是基于jQuery写的,主要实现的功能:自动播放、鼠标悬停、左右箭头控制+禁止点击 CSS样式: HTML布局( a标签最好加个title属性 ): JS脚本插件: 页面调用: 希望本文所

  • 本文向大家介绍JS实现FLASH幻灯片图片切换效果的方法,包括了JS实现FLASH幻灯片图片切换效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍js css3实现图片拖拽效果,包括了js css3实现图片拖拽效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍js实现图片懒加载效果,包括了js实现图片懒加载效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js图片懒加载的具体代码,供大家参考,具体内容如下 图片懒加载,思路:当鼠标滑动到对应图片的高度时,进行图片的加载; 当有类似于瀑布流的布局时常用的加载模式 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。