谁能给我一个类似网页游戏的效果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)'> <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>