两个通过js实现漂浮图片的例子

两例漂浮窗口都经过测试可用。

第一例；窗口内漂浮图片，不能跨窗口

<div id=img1 style="z-index:100; left: 2px; width: 200px; position: absolute; top: 85px; height: 61px; visibility: visible;">
   <a href="shownews.asp?articleid=21" target="_blank"><img src="images/pf.gif" width="200" height="85" border="0"></a>
</div>

<script type="text/JavaScript" src="popic1.js"></script>

其中popic1.js文件内容如下：

=============================================

var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img1.style.top = yPos;
function changePos()
{
 width = document.body.clientWidth;
 height = document.body.clientHeight;
 Hoffset = img1.offsetHeight;
 Woffset = img1.offsetWidth;
 img1.style.left = xPos + document.body.scrollLeft;
 img1.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()
  {
   img1.visibility = "visible";
  interval = setInterval('changePos()', delay);
 }
 function pause_resume()
 {
  if(pause)
  {
   clearInterval(interval);
   pause = false;}
  else
  {
   interval = setInterval('changePos()',delay);
   pause = true;
   }
  }
 start();

=============================================

第二例：建立弹出窗口，可以跨窗口在其他页面上显示

文件名为popic.js,内容是

=============================================

var imagepath="images/pf.gif"
var imagewidth=200 //这两行写图片的大小
var imageheight=85
var speed=2;
var imageclick="shownews.asp?articleid=21" //这里写点击图片连接到的地址
var hideafter=0
var isie=0;
if(window.navigator.appName=="Microsoft Internet Explorer"&&window.navigator.appVersion.substring(window.navigator.appVersion.indexOf("MSIE")+5,window.navigator.appVersion.indexOf("MSIE")+8)>=5.5) {
isie=1;
}
else {
isie=0;
}

if(isie){
var preloadit=new Image()
preloadit.src=imagepath
}

function pop() {
if(isie) {
x=x+dx;y=y+dy;
oPopup.show(x, y, imagewidth, imageheight);
if(x+imagewidth+5>screen.width) dx=-dx;     //显示器则是screen.width,网页中显示
if(y+imageheight+5>screen.Height) dy=-dy;
if(x<0) dx=-dx;
if(y<0) dy=-dy;
startani=setTimeout("pop();",50);
}
}

function dismisspopup(){
clearTimeout(startani)
oPopup.hide()
}

function dowhat(){
if (imageclick=="dismiss")
dismisspopup()
else
window.open(imageclick);
}

if(isie) {
var x=0,y=0,dx=speed,dy=speed;
var oPopup = window.createPopup();
var oPopupBody = oPopup.document.body;
oPopupBody.style.cursor="hand"
oPopupBody.innerHTML = '<IMG SRC="'+preloadit.src+'">';
oPopup.document.body.onmouseover=new Function("clearTimeout(startani)")
oPopup.document.body.onmouseout=pop
oPopup.document.body.onclick=dowhat
pop();
if (hideafter>0)
setTimeout("dismisspopup()",hideafter*1000)
}

 ======================================================