关于层之间传递值的问题 有点像许愿墙的功能,有一个全局的层的zIndex的currzIndex变量,当mousedown时this.style.zIndex = currZIndex++; 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>新建网页 1</title></head><body><div id=picdiv style="width:300px;height:300px;border:1px red solid;font-size:0px;float:left"><img id=pic_a src="1.jpg" style="width:300px;height:300px;"></div><div id=picS style="display:none;width:100px;height:100px;border:1px blue solid;font-size:0px;"><img id=pic_b src="2.jpg" bigsrc="3.jpg" style="width:100px;height:100px;" onclick=uphoto(this) alt="请点击2次"></div><br style="clear:both"><input type=button onclick=showphoto() value=upphoto><script language="javascript"><!--function getPosition(theElement){ var positionX =0; var positionY =0; while (theElement !=null){ positionX +=theElement.offsetLeft; positionY +=theElement.offsetTop; theElement =theElement.offsetParent; } return [positionX,positionY];}function showphoto(){document.getElementById("picS").style.display=""}var ws=100;//for pic_bvar hs=100;//for pic_bvar wb=300;//for pic_cvar hb=300;//for pic_cvar click=1//点击次数function uphoto(_this){ var w=ws var h=hs var url=_this.src//for pic_b if (click>1){ w=wb h=hb url=_this.bigsrc;//for pic_c } click++ var p=getPosition(document.getElementById("picdiv")) var newDiv=document.createElement("div") with(newDiv.style){ position="absolute" width=w+"px" height=h+"px" top=p[1] left=p[0] //zIndex=click*10 } newDiv.id="upphotodiv"+click newDiv.innerHTML='<img name=mypi_b_c src="'+url+'" style="width:'+w+'px;height:'+h+'px;">' document.body.appendChild(newDiv)}//--></script></body></html> 太感谢了!!! 2 楼真是大好人啊!!!不过,还有一个小问题:theElement.offsetLeft;theElement.offsetTop;theElement.offsetParent;我知道这几条语句是取位置用的属性,但是不太清楚具体什么意思?还麻烦你解答一下啊!还有就是这段代码在Firefox中工作不正常,原因在哪啊? theElement.offsetLeft; //theElement的实际lefttheElement.offsetTop; //theElement的实际toptheElement.offsetParent; //简单说:指存在的具有定位属性的父级(详情请GG)还有就是这段代码在Firefox中工作不正常 --请尝试调整 appendChild(newDiv)的方式(抱歉:本机目前未安装FF,无法测试) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>新建网页 1</title></head><body><div id=picdiv style="width:300px;height:300px;border:1px red solid;font-size:0px;float:left"><img id=pic_a src="1.jpg" style="width:300px;height:300px;"></div><div id=picS style="display:none;width:100px;height:100px;border:1px blue solid;font-size:0px;"><img id=pic_b src="2.jpg" bigsrc="3.jpg" style="width:100px;height:100px;" onclick=uphoto(this) alt="请点击2次"></div><br style="clear:both"><input type=button onclick=showphoto() value=upphoto><script language="javascript"><!--function getPosition(theElement){ var positionX =0; var positionY =0; while (theElement !=null){ positionX +=theElement.offsetLeft; positionY +=theElement.offsetTop; theElement =theElement.offsetParent; } return [positionX,positionY];}function showphoto(){document.getElementById("picS").style.display=""}var ws=100;//for pic_bvar hs=100;//for pic_bvar wb=300;//for pic_cvar hb=300;//for pic_cvar click=1//点击次数function uphoto(_this){ var w=ws var h=hs var url=_this.src//for pic_b if (click>1){ w=wb h=hb url=_this.bigsrc;//for pic_c } click++ var p=getPosition(document.getElementById("picdiv")) var newDiv=document.createElement("div") with(newDiv.style){ position="absolute" width=w+"px" height=h+"px" top=p[1] left=p[0] //zIndex=click*10 } newDiv.id="upphotodiv"+click newDiv.innerHTML='<img name=mypi_b_c src="'+url+'" style="width:'+w+'px;height:'+h+'px;">' document.body.appendChild(newDiv)}//--></script></body></html> 谢谢了!!!再麻烦一下,如果我的图片a是一个可以获得热区的图片呢?简单来说,就是在一个图片a热区上单击,弹出一个带有一张图片b的窗体,单击图片b图片b就会添加到图片a的相应的热区位置。我现在的疑惑是怎样确定这个热区位置呢?也就是怎样确定图片b或者包含图片b的div的left和top属性呢???要不我怎么知道要把图片b放在哪呢? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>热区加图片层</title></head><body><div id=picdiv style="width:300px;height:300px;border:0px red solid;font-size:0px;float:left"> <map name="FPMap0"> <area href="###" shape="rect" coords="0, 0, 100, 100" onclick="showphoto(this.coords,'images/2.jpg')" alt='2.jpg' > <area href="###" shape="rect" coords="200, 200, 300, 300" onclick="showphoto(this.coords,'images/3.jpg')" alt='3.jpg'> </map> <img id=pic_a src="images/1.jpg" style="width:300px;height:300px;" usemap="#FPMap0" border=0></div><div id=picS style="display:none;width:100px;height:100px;border:0px blue solid;font-size:0px;"> <img id=pic_b src=""coords="" style="width:100px;height:100px;" onclick=uphoto(this) border=0></div><br style="clear:both"><script language="javascript"><!--function getPosition(theElement){ var positionX =0; var positionY =0; while (theElement !=null){ positionX +=theElement.offsetLeft; positionY +=theElement.offsetTop; theElement =theElement.offsetParent; } return [positionX,positionY];}function showphoto(_coords,url){ with(document.getElementById("pic_b")){ coords=_coords src=url } document.getElementById("picS").style.display=""}function hidphoto(){ with(document.getElementById("pic_b")){ coords="" src="" } document.getElementById("picS").style.display="none"}var w=100;//for pic_bvar h=100;//for pic_bfunction uphoto(_this){ var p=getPosition(document.getElementById("picdiv")) var t=_this.coords.split(",") var newDiv=document.createElement("div") with(newDiv.style){ position="absolute" width=w+"px" height=h+"px" top=p[1]+parseInt(t[1])+"px" left=p[0]+parseInt(t[0])+"px" } newDiv.innerHTML='<img name=mypi_b_c src="'+_this.src+'" style="width:'+w+'px;height:'+h+'px;" border=0>' document.body.appendChild(newDiv) hidphoto()}//--></script></body></html> iframe里的src改变后触动事件 jQuery checkbox选择多项的问题 关于ajax跨域访问的问题 散一个模拟DIV滚动条实例 浏览器兼容性问题 table高度控制问题,希望高手帮助,谢谢 谁能给我发一份excel导入导出的完整项目给新人我参考下 怎样把半角的空格替换成全角的空格?????????? 关于一个frame中要控制frameset的cols的问题? 函数封装问题求大神 问个下拉表的问题 有没有什么技术可以实现html的select属性翻页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head><body><div id=picdiv style="width:300px;height:300px;border:1px red solid;font-size:0px;float:left">
<img id=pic_a src="1.jpg" style="width:300px;height:300px;">
</div>
<div id=picS style="display:none;width:100px;height:100px;border:1px blue solid;font-size:0px;">
<img id=pic_b src="2.jpg" bigsrc="3.jpg" style="width:100px;height:100px;" onclick=uphoto(this) alt="请点击2次">
</div>
<br style="clear:both">
<input type=button onclick=showphoto() value=upphoto>
<script language="javascript">
<!--
function getPosition(theElement){
var positionX =0;
var positionY =0;
while (theElement !=null){
positionX +=theElement.offsetLeft;
positionY +=theElement.offsetTop;
theElement =theElement.offsetParent;
}
return [positionX,positionY];
}function showphoto(){
document.getElementById("picS").style.display=""
}var ws=100;//for pic_b
var hs=100;//for pic_b
var wb=300;//for pic_c
var hb=300;//for pic_c
var click=1//点击次数
function uphoto(_this){
var w=ws
var h=hs
var url=_this.src//for pic_b
if (click>1){
w=wb
h=hb
url=_this.bigsrc;//for pic_c
}
click++
var p=getPosition(document.getElementById("picdiv"))
var newDiv=document.createElement("div")
with(newDiv.style){
position="absolute"
width=w+"px"
height=h+"px"
top=p[1]
left=p[0]
//zIndex=click*10
}
newDiv.id="upphotodiv"+click
newDiv.innerHTML='<img name=mypi_b_c src="'+url+'" style="width:'+w+'px;height:'+h+'px;">'
document.body.appendChild(newDiv)
}
//-->
</script>
</body>
</html>
2 楼真是大好人啊!!!
不过,还有一个小问题:
theElement.offsetLeft;
theElement.offsetTop;
theElement.offsetParent;
我知道这几条语句是取位置用的属性,但是不太清楚具体什么意思?
还麻烦你解答一下啊!
还有就是这段代码在Firefox中工作不正常,原因在哪啊?
theElement.offsetTop; //theElement的实际top
theElement.offsetParent; //简单说:指存在的具有定位属性的父级
(详情请GG)还有就是这段代码在Firefox中工作不正常
--请尝试调整 appendChild(newDiv)的方式
(抱歉:本机目前未安装FF,无法测试)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head><body><div id=picdiv style="width:300px;height:300px;border:1px red solid;font-size:0px;float:left">
<img id=pic_a src="1.jpg" style="width:300px;height:300px;">
</div>
<div id=picS style="display:none;width:100px;height:100px;border:1px blue solid;font-size:0px;">
<img id=pic_b src="2.jpg" bigsrc="3.jpg" style="width:100px;height:100px;" onclick=uphoto(this) alt="请点击2次">
</div>
<br style="clear:both">
<input type=button onclick=showphoto() value=upphoto>
<script language="javascript">
<!--
function getPosition(theElement){
var positionX =0;
var positionY =0;
while (theElement !=null){
positionX +=theElement.offsetLeft;
positionY +=theElement.offsetTop;
theElement =theElement.offsetParent;
}
return [positionX,positionY];
}function showphoto(){
document.getElementById("picS").style.display=""
}var ws=100;//for pic_b
var hs=100;//for pic_b
var wb=300;//for pic_c
var hb=300;//for pic_c
var click=1//点击次数
function uphoto(_this){
var w=ws
var h=hs
var url=_this.src//for pic_b
if (click>1){
w=wb
h=hb
url=_this.bigsrc;//for pic_c
}
click++
var p=getPosition(document.getElementById("picdiv"))
var newDiv=document.createElement("div")
with(newDiv.style){
position="absolute"
width=w+"px"
height=h+"px"
top=p[1]
left=p[0]
//zIndex=click*10
}
newDiv.id="upphotodiv"+click
newDiv.innerHTML='<img name=mypi_b_c src="'+url+'" style="width:'+w+'px;height:'+h+'px;">'
document.body.appendChild(newDiv)
}
//-->
</script>
</body>
</html>
再麻烦一下,
如果我的图片a是一个可以获得热区的图片呢?
简单来说,就是在一个图片a热区上单击,
弹出一个带有一张图片b的窗体,单击图片b
图片b就会添加到图片a的相应的热区位置。
我现在的疑惑是怎样确定这个热区位置呢?
也就是怎样确定图片b或者包含图片b的div
的left和top属性呢???要不我怎么知道要把
图片b放在哪呢?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>热区加图片层</title>
</head>
<body>
<div id=picdiv style="width:300px;height:300px;border:0px red solid;font-size:0px;float:left">
<map name="FPMap0">
<area href="###" shape="rect" coords="0, 0, 100, 100" onclick="showphoto(this.coords,'images/2.jpg')" alt='2.jpg' >
<area href="###" shape="rect" coords="200, 200, 300, 300" onclick="showphoto(this.coords,'images/3.jpg')" alt='3.jpg'>
</map>
<img id=pic_a src="images/1.jpg" style="width:300px;height:300px;" usemap="#FPMap0" border=0>
</div>
<div id=picS style="display:none;width:100px;height:100px;border:0px blue solid;font-size:0px;">
<img id=pic_b src=""coords="" style="width:100px;height:100px;" onclick=uphoto(this) border=0>
</div><br style="clear:both"><script language="javascript">
<!--
function getPosition(theElement){
var positionX =0;
var positionY =0;
while (theElement !=null){
positionX +=theElement.offsetLeft;
positionY +=theElement.offsetTop;
theElement =theElement.offsetParent;
}
return [positionX,positionY];
}function showphoto(_coords,url){
with(document.getElementById("pic_b")){
coords=_coords
src=url
}
document.getElementById("picS").style.display=""
}function hidphoto(){
with(document.getElementById("pic_b")){
coords=""
src=""
}
document.getElementById("picS").style.display="none"
}var w=100;//for pic_b
var h=100;//for pic_b
function uphoto(_this){
var p=getPosition(document.getElementById("picdiv"))
var t=_this.coords.split(",")
var newDiv=document.createElement("div")
with(newDiv.style){
position="absolute"
width=w+"px"
height=h+"px"
top=p[1]+parseInt(t[1])+"px"
left=p[0]+parseInt(t[0])+"px"
}
newDiv.innerHTML='<img name=mypi_b_c src="'+_this.src+'" style="width:'+w+'px;height:'+h+'px;" border=0>'
document.body.appendChild(newDiv)
hidphoto()
}
//-->
</script></body>
</html>