这两天，遇到一个需求，就是在一个页面中浮动一张图片，兼容浏览器那是默认需求、鼠标悬停那也算是默认需求，本来认为没什么麻烦的，网上那么多，随便搜一个再改吧改吧就哦了，可是，后来发现，没有想象的那么简单；
问题一：网上DEMO都是在无DTD标准下处理的；
问题二：不能兼容多个浏览器；
这些都无法满足我的需求，对此问题，搞了将近一天时间，最后功夫不负有心人，加上网上的一篇文章的建议，终于可以说“我成功了”，希望有朋友用得上。
好了，前序到此，上代码：
| var xPos = 300; var yPos = 200; var step = 2; var delay = 30; var height = 0; var Hoffset = 0; var Woffset = 0; var yon = 0; var xon = 0; var pause = true; var interval; var flowimg = document.getElementById("flowimg"); function changePos() { Hoffset = flowimg.offsetHeight; Woffset = flowimg.offsetWidth; width = document.documentElement.clientWidth || document.body.clientWidth; height = document.documentElement.clientHeight || document.body.clientHeight; flowimg.style.left = xPos + (document.body.scrollLeft || document.documentElement.scrollLeft) + "px"; flowimg.style.top = yPos + (document.body.scrollTop || document.documentElement.scrollTop) + "px"; 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() { flowimg.visibility = "visible"; flowimg.onmouseover = function() { pause_resume(); } flowimg.onmouseout = function() { pause_resume(); } interval = setInterval('changePos()', delay); } function pause_resume() { if (pause) { clearInterval(interval); pause = false; } else { interval = setInterval('changePos()', delay); pause = true; } } start(); |
忘记是哪位仁兄/MM 的原型代码了，在此功能上，完善了，鼠标的暂停、浏览器的兼容功能；
----参考：http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp
