js如何设置DIV层中的图片

lxb0030 2008-05-17 01:59:11

http://diy.kadang.com/diy/diy34.html
如同这个网页的JS显示图层效果怎么写？
就是选择一张图片，作为图层覆盖到另一张特定图片上

...全文

894 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

yinchuanshuxiu 2008-05-19

打赏
举报

没必要这么麻烦把，只需要用一个image控件，然后将图片的地址放到数组，点击按钮改变其src就可以了。

chen_hh2 2008-05-19

打赏
举报

mark

lxb0030 2008-05-19

打赏
举报

[Quote=引用 3 楼 mumuTiger 的回复:]
<div style="z-index:200"> </div>
<div id=“mask” style="position:absolute;width:自己定义;height:自己定义;z-index:220;display:none;"> <img src="" alt="浮动上面的图片"> </div>

js调用：

document.getElementById('mask').style.display ="" ; document.getElementById('mask').firstChild.src = 文件输入框中传上来的图片在服务器的绝对路径
[/Quote]

还是不太明白。。。JS里没有function方法，怎么调用呢。。。

<html>
<head>
</head>
<script>

//

</script>
<body>
<div style="z-index:200"> </div>
<div id=“mask” style="position:absolute;width:200;height:200;z-index:220;display:none;"> <img src="" alt="浮动上面的图片"> </div>
</body>
</html>

格式是这样的吧？script里该怎么呢？

lxb0030 2008-05-19

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

</HEAD>
<script type="text/javascript" src="common.js"></script>
<script>

var ie=document.all;

var nn6=document.getElementById&&!document.all;

var isdrag=false;

var x,y;

var dobj;

function movemouse(e)

{

if (isdrag)

{

dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;

dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;

return false;

}

}

function selectmouse(e)

{

var fobj = nn6 ? e.target : event.srcElement;

var topelement = nn6 ? "Html" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme")

{

fobj = nn6 ? fobj.parentNode : fobj.parentElement;

}

if (fobj.className=="dragme")

{

isdrag = true;

dobj = fobj;

tx = parseInt(dobj.style.left+0);

ty = parseInt(dobj.style.top+0);

x = nn6 ? e.clientX : event.clientX;

y = nn6 ? e.clientY : event.clientY;

document.onmousemove=movemouse;

return false;

}

}

document.onmouseup=new Function("isdrag=false");

function GetElCoordinate(e) //获取Element的坐标
{
var t = e.offsetTop;
var l = e.offsetLeft;

while (e = e.offsetParent)
{
t += e.offsetTop;
l += e.offsetLeft;
}
return {
top: t,
left: l
}
}
function over(path)
　　{
document.getElementById("new").style.display="";
var o= GetElCoordinate(img);
var left = o.left+400;
var top = o.top+40;
document.getElementById("new").style.left = left;
document.getElementById("new").style.top = top;
document.getElementById("new").innerHTML='<img id ="img" src="../upload/' + path + '" width="120" height="120" onload="javascript:resizeimg(this,200,200)">';
}

function move()
{
document.getElementById("new").style.display="none";
}

function resizeimg(ImgD,iwidth,iheight) {
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
　　　　　//ImgD.style.cursor= "pointer"; //改变鼠标指针
　　　　　//ImgD.onclick = function() { window.open(this.src);} //点击打开大图片
　　　　if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) { //判断浏览器，如果是IE
　　　　　　//ImgD.title = "请使用鼠标滚轮缩放图片，点击图片可在新窗口打开";
　　　　　　//ImgD.onmousewheel = function img_zoom() //滚轮缩放
　　　　　 //{
　　　　　　//　　　　var zoom = parseInt(this.style.zoom, 10) || 100;
　　　　　　//　　　　zoom += event.wheelDelta / 12;
　　　　　　//　　　　if (zoom> 0)　this.style.zoom = zoom + "%";
　　　　　　//　　　　return false;
　　　　　 //}
　　　 } else { //如果不是IE
　　　　　　　 //ImgD.title = "点击图片可在新窗口打开";
　　　　　　 }
}
}

</script>
<BODY>

<div id="new" style="position:absolute; width:150px; height:268px; z-index:1; left: 685px; top: 160px;display:none;" class="dragme" onmousedown="selectmouse(this);"></div>
<input type ="button" onClick="over();" value="移动">
<input type="button" onClick="move();" value="移除">
<div id="img">
</BODY>
</htML>

问题已解决~

daneen173 2008-05-19

打赏
举报

<html >
<head>
<script type="text/javascript">
function abc(){
document.getElementById('mask').style.display ="" ;
document.getElementById('mask').firstChild.src = "2.jpg";
}
</script>
</head>
<div id=“mask” style="position:absolute;width:200;height:200;z-index:220;display:none;">
<img src="1.jpg" width="350" height="522"/>
<input type="button" value="查找" onclick="abc()">
</div>
</html>

ccnu0524 2008-05-18

打赏
举报

jackyBody 2008-05-18

打赏
举报

<div style="z-index:200"></div>
<div id=“mask” style="position:absolute;width:自己定义;height:自己定义;z-index:220;display:none;"><img src="" alt="浮动上面的图片"></div>

js调用：

document.getElementById('mask').style.display ="" ; document.getElementById('mask').firstChild.src = 文件输入框中传上来的图片在服务器的绝对路径

lxb0030 2008-05-18

打赏
举报

听得很糊涂。。。呵呵
因为我是学WEB编程，用JSP，只是需要用到这个，对JS没有深研。。。有没哪位仁兄有此JS代码的，帮发上来下。。。谢谢了！呵呵

comdeng 2008-05-18

打赏
举报

通过挪动覆盖上去的图片可知，覆盖上去的图片只是在一个矩形区域内变化。也就是说，只要让这个图片显示在一个矩形区域内就可以了。让图片的某一部分显示出来，可以通过对一个div设置背景图片的位置实现。比如background-position:20px 30px。这样的话，通过对background-position的不断调整，就能实现图片的挪动了。至于覆盖，只需要把上面这一层的position设为absolute，就可以随心所欲地覆盖底下的图片了。