这篇文章主要介绍了 js 实现图片漂浮效果的方法, 实例分析了 javascript 实现图片漂浮的技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 程序设计有所帮助。
来源: