如何点击图片， 在制定的位置逐渐的显示图片的注释

<html> <head> <title> </title> 
<script> 
var j=0; 
function show(obj) 
{ 
var suo=["1jiewwhao1","2jieshao2","3jieshao3","4jieshao4","jieshao5","jieshao6","jieshao7","jieshao8","jiehao9"]; 
//alert(suo[3].substring(0,j));
document.getElementById("xie").innerHTML=obj.value.substring(0,j);
j++; 
  if (j <obj.value.length) 
        { 
            var val=setTimeout(function(){show(obj)},100); 
        } 
        else 
        { 
        clearTimeout(val); 
        j=0; 
        } 
} 
</script> 
</head> <body> 
<div onclick="show(this)" value='fdsadfdsfdsffdds'>img1 </div> 
<div onclick="show(this)" value='wfwefewfewfef'>img2 </div> 
<div onclick="show(this)" value='wrewffcwefcwe'>img3 </div> 
<div onclick="show(this)" value='wefdsgvregrg'>img4 </div> 
<div onclick="show(this)" value='785874551464'>img5 </div> <div id="xie">注释内容 </div> 
</body> </html>

解决方案 »

  1.   

    <html> <head> <title> </title> 
    <script> 
    var i=0 ,j=0;
    var suo=["1jiewwhao1","2jieshao2","3jieshao3","4jieshao4","jieshao5","jieshao6","jieshao7","jieshao8","jiehao9"]; function show(obj) {
    i=getTxt(obj) 
    doShow(obj)
    }function doShow(obj) {
    document.getElementById("xie").innerHTML=suo[i].substring(0,j); 
    j++; 
      if (j <=suo[i].length){ 
         var val=setTimeout(doShow,100); 
      } 
      else { 
         clearTimeout(val); 
         j=0; 
      } 
    } function getTxt(obj){
    var _obj=document.getElementsByTagName("div")
    for (var i=0;i<suo.length;i++)
    if (_obj[i]==obj){return i;}
    }
    </script> 
    </head> <body> 
    <div onclick="show(this)">img1 </div> 
    <div onclick="show(this)">img2 </div> 
    <div onclick="show(this)">img3 </div> 
    <div onclick="show(this)">img4 </div> 
    <div onclick="show(this)">img5 </div> 
    <div onclick="show(this)">img6 </div> 
    <div onclick="show(this)">img7 </div> 
    <div onclick="show(this)">img8 </div> 
    <div onclick="show(this)">img9 </div> 
    <div id="xie">注释内容 </div> 
    </body> </html>