日期:2014-05-20  浏览次数:20711 次

谁能给我一个类似网页游戏的效果div(悬浮的那种),而且可以多层显示
如果有更好的悬浮效果请给上传一个,我的邮箱是tanzaiqi@163.com
能支持ie也能支持火狐的浏览器
expression不能使用这个
因为我在jsp页面上调用的时候就不能使用了,
因为我将JavaScript代码和css样式分别放在js文件和cs文件里面
在页面上分别引用,可是我调用的时候不能引用fixed样式,
请问各位有没有更好的显示方法和效果
如果有请发到我的邮箱,在此谢谢各位!
下面是我写的一个例子,可以参考一下,如果在jsp页面上执行,就无法用,所以谁有更好的方法请给我传一个!<html>
<style>
body{
  position:relative;
  }
.fixed{


  position:absolute;
  top:expression(eval(document.body.scrollTop));
  left:expression(eval(document.body.scrollLeft));
  }
</style>
<script language=javascript>
var nowid=0;
 function f_creatediv(divcnt){
  //for(var i=0;i<divcnt;i++){
var bgdiv = document.createElement("DIV");
bgdiv.id="bg"+divcnt;
bgdiv.style.top = 0;
bgdiv.style.left = 0;
//bgdiv.style.background = '#6699FF';
bgdiv.style.position = 'absolute';
bgdiv.style.zindex = divcnt;
bgdiv.style.visibility = 'visible';
bgdiv.style.width = '100%';
bgdiv.style.height = document.body.scrollHeight; 
//bgdiv.style.backgroundcolor = "#333333";
//filter: alpha(opacity=40)
bgdiv.style.filter = "alpha(opacity=40)";
bgdiv.style.MozOpacity = 0.40;
document.body.appendChild(bgdiv);
  var objdiv = document.createElement("DIV");
  var objname="infodiv_" + divcnt;
  objdiv.id = objname;
  objdiv.style.top = 150;
  objdiv.style.left = 250;
  // objdiv.style.background = '#FFFF00';
  objdiv.style.position = 'absolute';
  objdiv.style.zindex = divcnt;
  objdiv.style.visibility = 'visible';
  objdiv.style.width = 100;
  objdiv.style.height = 180; 
  //objdiv.style.border = "5 groove black";
  objdiv.innerHTML="<div class=fixed><img src=http://www.webjx.com/images/logo.gif><input type='button' value='add' onclick='f_creatediv(nowid++)'> <input type='button' value='del' id='"+divcnt+"' onclick='killdiv(this.id)'> &nbsp;<img src='http://www.baidu.com/img/logo-yy.gif'> SHOP_" + nowid+"</div>";
  document.body.appendChild(objdiv);
  document.getElementById(objname).onmouseover = function()
  {
  //alert(this.id);
  };
  //}
 }
 function killdiv(delid){
document.body.removeChild(document.getElementById("infodiv_"+delid));
document.body.removeChild(document.getElementById("bg"+delid));
nowid--;
 }
</script>
<body>
<table>
<tr>
 <td>
<input type='button' value='add' onclick='f_creatediv(nowid++)'>
<input type='button' value='del' style=" position:fixed" onclick='killdiv(nowid++)'>
</table>
</body>
</html>


------解决方案--------------------
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT language=JavaScript> 
var xPos = 20; 
var yPos = 10;  
var step = 1; 
var delay = 4; 
var width,height,Hoffset,Woffset; 
var y = 1; 
var x = 1; 
var interval; 
var imgt;
function changePos() 
{ 
  width = document.body.clientWidth;//取得浏览器的宽度 
  height = document.body.clientHeight;//取得浏览器的高度 
  Hoffset = imgt.offsetHeight;//取得当前元素(传进来的参数)的高度 
  Woffset = imgt.offsetWidth;// 取出左边的宽带的宽度 
  if (y) 
  { 
    yPos = yPos + step; 
  } 
  else 
  { 
    yPos = yPos - step; 
  } 
  if (yPos < 0) 
  { 
    y = 1; 
    yPos = 0; 
  } 
  if (yPos >= (height - Hoffset)) 
  { 
    y = 0; 
    yPos = (height - Hoffset); 
  } 
  if (x) 
  { 
    xPos = xPos + step; 
  } 
  else 
  { 
    xPos = xPos - step; 

  } 
  if (xPos < 0) 
  { 
    x = 1; 
    xPos = 0; 
  } 
  if (xPos >= (width - Woffset)) 
  { 
    x = 0; 
    xPos = (width - Woffset); 

  
  } 
  imgt.style.left = xPos ; 
  imgt.style.top = yPos ; 
} 
function start() 
{ 
    imgt=document.getElementById("imgt");
    imgt.style.left= xPos; 
    imgt.style.top = yPos;
    imgt.visibility = "visible";
    interval = setInterval('changePos()', delay); 
} 
function pause_resume() 
{ 
    clearInterval(interval); 
} 

</SCRIPT> 
<BODY onload="start();">
<div id="imgt" style="position:absolute;background-color:red;">asdfsf
</div>

</BODY>
</HTML>