js如何设置DIV层中的图片

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

解决方案 »

  1.   

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

  2.   

    <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 = 文件输入框中传上来的图片在服务器的绝对路径 
      

  3.   


    还是不太明白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里该怎么呢？
      

  4.   

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

  5.   

    <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>
      

  6.   

    <!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>问题已解决~