| 标题 | js实现图片漂浮效果的方法 |
| 范文 | 这篇文章主要介绍了js实现图片漂浮效果的方法,实例分析了javascript实现图片漂浮的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了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"> <a href="#" target="_blank"><img src="Images/OPVTI.jpg" /></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程序设计有所帮助。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。