如何用javascript实现这么一个功能？

在<HEAD>里面定义显示函数： 
<SCRIPT LANGUAGE=JavaScript> 
function Face_Info(face,id) 
{ 
var showArray = face.split('-'); 
var s=""; 
for (var i=0; i<=25; i++) 
{ 
if(showArray[i] != '0') 
{ 
s+="<IMG src=/club/show/face/"+i+"/"+showArray[i]+".gif style='padding:0;position:absolute;top:0;left:0;width:140;height:226;z-index:"+i+";'>"; 
} 
} 
s+="<IMG src=/club/show/face/blank.gif style='padding:0;position:absolute;top:0;left:0;width:140;height:226;z-index:50;'>"; 
id.innerHTML=s; 
} 
</script> 需要显示头像的地方定义DIV ID： 
<DIV id=user_fasce_1 style='padding:0;position:relative;top:0;left:0;width:140;height:226' align=left></div> 适当的时刻调用函数显示头像： 
<SCRIPT LANGUAGE=JavaScript> 
Face_Info('0-0-0-0-0-0-0-initf-31-21-0-initf-0-initf-init-0-0-0-4-0-0-0-0-2-27-0',user_fasce_1); 
</script>
试试这个

解决方案 »

  1.   

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Hide
    function killErrors() {
      return true;
    }
       window.onerror = killErrors;
    // -->
    </SCRIPT><SCRIPT>
    <!-- Beginning of JavaScript -
    var imgwidth=450
    var imgheight=300
    var imgurl="images/4.gif"
    var marginright
    var imgslices=20
    var width_slice=Math.floor(imgwidth/imgslices)
    var cliptop=0
    var clipbottom=imgheight
    var clipleft=0
    var clipright=width_slice
    var step=50
    var pause=20
    var spannummer=0
    var spannrbefore=0
    var x_finalpos=5
    var y_finalpos=5function initiate() {
        if (document.all) {
            moveslices_IE()
        }
    }function moveslices_IE() {
        var thisspan=eval("document.all.span"+spannummer+".style")
        if (thisspan.posLeft>x_finalpos-width_slice) {
            thisspan.posLeft-=step
            var timer=setTimeout("moveslices_IE()",pause)
        }
        else if (spannummer<imgslices-1) {
            clearTimeout(timer)
            thisspan.posLeft=x_finalpos
            spannummer++
            var timer=setTimeout("moveslices_IE()",pause)
        }
        else {
            thisspan.posLeft=x_finalpos
            clearTimeout(timer)
            var timer=setTimeout("showredir()",1000)
        }
    }function showredir() {
        document.all.redir.style.visibility="VISIBLE"
    }// - End of JavaScript - -->
    </SCRIPT>
    </HEAD>
    <BODY  onload=initiate()>
    <SCRIPT>
    <!-- Beginning of JavaScript -
    for (i=0;i<=imgslices-1;i++) {
        marginright=screen.width+50
        document.write("<span id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginright+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")
        document.write("<img src='"+imgurl+"'>")
        document.write("</span>")
        clipleft+=width_slice
        clipright+=width_slice
    }
    // - End of JavaScript - -->
    </SCRIPT>   还可以看看这个！！
      

  2.   

    你可以把选中的两个对象放到一个div中,然后移动时移动这个div就得了.
      

  3.   

    我没用过JAVASCRIPT，8楼大哥，具体怎么实现啊
      

  4.   

    你可以把选中的两个对象放到一个div中,然后移动时移动这个div就得了.
    他是合成一张这样做的话不是合成一张，只是把一张放到另一张后面要这种功能：比如你桌面上的   我的电脑和回收站   你用鼠标拖拽到时候都是拖动单个移动，现在通过代码实现   我的电脑和回收站绑定，移动时是俩个同时移动你这意思是不是同时移动2张图片？？
      

  5.   

    条件：有个 img 和 text 结果：img和text成一幅图片
      

  6.   

    新建一个元素预存img+text 设置display 注册事件监听
      

  7.   

    <!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" >
    <head>
    <title>拖动测试页面</title>
    <script type="text/javascript">
        window.onload=function(){
            var img1=document.getElementById("img");
            var img2=document.getElementById("img1");
            DragTag(img1);
            DragTag(img2);
        }
        function createTeam(){
            var g=new DragGroup();
            g.add(document.getElementById("img"));
            g.add(document.getElementById("img1"));
        }
    </script>
    </head>
    <body>
    <img id="img" /><br />
    <img id="img1" /><br />
    <input type="button" onclick="createTeam()" value="绑定2张图片" /><br />
    </body>
    </html>
    <script type="text/javascript">
    window.dragingObj=null;
    document.onmousemove=function(evt){
        if(dragingObj!=null){
            evt=evt?evt:event;
            if(typeof(lastX)=="undefined"||lastX==null){
                lastX=evt.screenX;
                lastY=evt.screenY;
                return;
            }
            var x=evt.screenX-lastX;
            var y=evt.screenY-lastY;
            lastX=evt.screenX;
            lastY=evt.screenY;
            dragingObj.move(x,y);
        }
    }
    document.onmouseup=function(){
        dragingObj=null;
        lastX=null;
    }
    function DragTag(obj){
        obj.style.position="absolute";
        if(obj.style.top=="")obj.style.top="0px";
        if(obj.style.left=="")obj.style.left="0px";
        obj.group=null;
        obj.move=function(x,y){
            this.style.top=parseInt(this.style.top)+y+"px";
            this.style.left=parseInt(this.style.left)+x+"px";
        }
        obj.onmousedown=function(){
            if(this.group==null){
                dragingObj=this;
            }else{
                dragingObj=this.group;
            }
        }
    }
    function DragGroup(){
        this.members=[];
        this.move=function(x,y){
            for(var i=0;i<this.members.length;i++){
                this.members[i].move(x,y);
            }
        }
        this.add=function(item){
            this.members.push(item);
            item.group=this;
        }
    }
    </script>
      

  8.   

    大概的代码如下了,不知道ff怎么搞的,在图片上执行拖动时无法拖动,只能在text上执行拖动,在ie下要加了ondrag="return false"后才能在图片上拖动,暂时不知道怎么解决这个问题.
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312" />
    <title>模仿Windows图标拖动</title>
    <style type="text/css">
    .focus{border:2px solid blue}
    </style>
    <script  type="text/javascript"> 
    var Arr=new Array();
    var eventObj=new Object();//移动参考的对象，用来记录上一次鼠标点击的位置及对象添加状态
    var IsMouseDown=false;
    var IsMouseMove=false;
    document.onmousedown=function(e)
    {  
      IsMouseDown=true;
      e=e||event;
      eventObj.x=e.clientX;
      eventObj.y=e.clientY;
      var tag=e.target?e.target:e.srcElement;
      var Index;
      if(tag.tagName=="IMG"||(tag.tagName=="INPUT"&&tag.type=="text"))//是需要移动的对象
      {
         if(e.ctrlKey)
         {
           if(tag.className!="focus")
           {                    
              Arr.push(NewObj(tag));
              eventObj.newAdd=true;
           }
         }
      }
      else
      {
        if(!e.ctrlKey)
          ClearAll();
      }
    }
    document.onmouseup=function(e)
    {  
      if(IsMouseMove)
        RefreshArr();
      else
      {
        e=e||event;
        var tag=e.target?e.target:e.srcElement;
        if(!e.ctrlKey)
        {
          ClearAll();     
          if((tag.tagName=="INPUT"&&tag.type=="text")||tag.tagName=="IMG")
           Arr.push(NewObj(tag));
        }
        else
        {
           if(tag.className=="focus"&&eventObj.newAdd!=true)
           {
             tag.className='';
             Arr.splice(GetIndex(tag),1);
           }
        }
      }
      IsMouseDown=false;
      IsMouseMove=false;  
      eventObj.newAdd=null;
    }
    function RefreshArr()//鼠标起来后更新对象的最后位置
    {
      var o;
      for(var i=0;i<Arr.length;i++)
      {
        o=Arr[i];
        o.x=parseInt(o.obj.style.left);
        o.y=parseInt(o.obj.style.top);
      }
    }
    function NewObj(o)//创建新对象，Arr数组存储的
    {  
      var obj=new Object();
      o.className='focus';
      obj.x=parseInt(o.style.left);
      obj.y=parseInt(o.style.top);
      obj.obj=o;
      return obj;  
    }
    function ClearAll()//删除数组中所有对象
    {
      for(var i=0;i<Arr.length;i++)//先清除已经收集对象的css
      {
        Arr[i].obj.className='';
      }
      Arr.splice(0,Arr.length);//清除数组中的数据
    }
    function GetIndex(o)//返回对象在数组中的下标
    {
       for(var i=0;i<Arr.length;i++)
       {
          if(Arr[i].obj==o)
            return i;
       }
       return -1;
    }
    document.onmousemove=function(e)
    {    
      if(IsMouseDown)//鼠标按下并且移动
      {    
        IsMouseMove=true;
        e=e||event;
        var o;
        for(var i=0;i<Arr.length;i++)
        {
          o=Arr[i];
          o.obj.style.left=e.clientX-eventObj.x+o.x;
          o.obj.style.top=e.clientY-eventObj.y+o.y;
        }
      }
    }
    </script>
    </head> 
    <body>
    <!---left和top要注意加上，要不出错。也不要使用css来定义，这样obj.style.left取不到值--->
    <img src='1.jpg' style="position:absolute;top:0px;left:0px;" ondrag="return false;"/>
    <img src='1.gif' style="position:absolute;top:50px;left:0px;" ondrag="return false;"/>
    <input type="text" value="1" style="position:absolute;top:100px;left:0px"/>
    <input type="text" value="2" style="position:absolute;top:150px;left:0px"/>
    </body> 
    </html>
      

  9.   

    不知道怎么实现windows下的shift键选取对象,只实现了ctrl的选取
      

  10.   

    shift的也有的
    抓取动作
    看看我博客里好象有说这个的
      

  11.   

    问题好像做着做着偏移原来的初衷了，目的是两个对象要组合成一个对象，移动到是其次，要通过点击一个BUTTON，让两个对象自动绑定成一个对象
    大哥们，我先结下贴把分给你们 ，然后我再开个，麻烦大家再做做，那时候貌似分不多了，只能给60了，望大家不要嫌少啊
      

  12.   

    有点象用js做个一个拼图游戏  
    假如 现在 4张散图 
    1和2拼好 就粘在一起 移动的时候 1和2 相对位置不变就ok了 
    这里提供一个思路 
    将各自对象 编号 
    移动原对象 然后 粘到目标对象上  
    粘完后 给目标对象 clone一个段代码 表示原对象 
    而真正的原对象 隐藏 
    给外人感觉是 粘一起了 目标对象 就可以合并一起来移动 
    我象也比较好实现 
    希望有点帮助.