js图片漂浮效果

最新推荐文章于 2021-04-13 21:09:19 发布

开心就是最好

最新推荐文章于 2021-04-13 21:09:19 发布

阅读量1.4k

点赞数

分类专栏： JS 文章标签： js漂浮

JS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

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

<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="http://10.21.3.7/vt" 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>