.net里Repeater控件显示的图像，用js产生 不间断滚动、鼠标over放大、out恢复原样


<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}
</style>
<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
 <img src="http://www.makewing.com/images/uppic/200801101244190.jpg">
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
 var ts = gg[i];
 ts.onmousemove = function(event){
  event = event || window.event;
  ei.style.display = "block";
  ei.innerHTML = '<img src="' + this.src + '" />';
  ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
  ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
 }
 ts.onmouseout = function(){
  ei.innerHTML = "";
  ei.style.display = "none";
 }
 ts.onclick = function(){
  window.open( this.src );
 }
}
</script>
给你个效果看看

解决方案 »

  1.   


    呵呵，这个你就想不开了吧你图片上加：<img src='1.jpg' onmouseover='showbig(this)'>
    这样会同时放大几张？？？
      

  2.   

    ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
      ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";这个定位的不太懂,求大师解释解释,呵呵.
      

  3.   


    我改了，但滚动后，还是会有很多问题。
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    #demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
    #demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
    #enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}
    </style></head><body>
    <div id="demo" style="overflow:hidden;width:650px;text-align:center;padding:10px">
    <table width="645" height="130" border="0" style="vertical-align: top" cellspacing="0" cellpadding="0" class="blogphototab">
                  <tr>
                     <td id="demo1" align="left">
                   
                        
                     <table width="458" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="100" style="height: 110px"><img src="http://image.eee114.com/xbs/images/indeximg/indexwanba/1.gif" width="142" height="110" /></td>
                  <td width="6" style="height: 110px">&nbsp;</td>
                  <td width="100" style="height: 110px"><img src="http://image.eee114.com/xbs/images/indeximg/indexwanba/2.gif" width="142" height="110" /></td>
                  <td style="height: 110px">&nbsp;</td>
                  <td width="100" style="height: 110px"><img src="http://image.eee114.com/xbs/images/indeximg/indexwanba/3.gif" width="142" height="110" /></td>
                  <td style="height: 110px">&nbsp;</td>
                  <td width="100" style="height: 110px"><img src="http://image.eee114.com/xbs/images/indeximg/indexwanba/4.gif" width="142" height="110" /></td>
                  <td width="6" style="height: 110px">&nbsp;</td>
                  <td width="100" style="height: 110px"><img src="http://image.eee114.com/xbs/images/indeximg/indexwanba/5.gif" width="142" height="110" /></td>
                  <td width="6" style="height: 110px">&nbsp;</td>
                  <td width="100" style="height: 110px"><img src="http://image.eee114.com/xbs/images/indeximg/indexwanba/6.gif" width="142" height="110" /></td>
                  <td style="height: 110px">&nbsp;</td>
                  <td width="100" style="height: 110px"><img src="http://image.eee114.com/xbs/images/indeximg/indexwanba/7.gif" width="142" height="110" /></td>
                  <td style="height: 110px">&nbsp;</td>
                  <td width="100" style="height: 110px"><img src="http://image.eee114.com/xbs/images/indeximg/indexwanba/5.gif" width="142" height="110" /></td>
                </tr>
            </table>
                     </td>
                     <td id="demo2">
                     </td>              </tr>
                </table>
    </div>
    <div id="enlarge_images"></div>
    <script>
    var demo = document.getElementById("demo");
    var gg = demo.getElementsByTagName("img");
    var ei = document.getElementById("enlarge_images");
    for(i=0; i<gg.length; i++){
     var ts = gg[i];
     ts.onmousemove = function(event){
      event = event || window.event;
      ei.style.display = "block";
      ei.innerHTML = '<img src="' + this.src + '" />';
      ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
      ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
     }
     ts.onmouseout = function(){
      ei.innerHTML = "";
      ei.style.display = "none";
     }
     ts.onclick = function(){
      window.open( this.src );
     }
    }var speed=20//速度数值越大速度越慢
      demo2.innerHTML=demo1.innerHTML
      function Marquee(){
      if(demo2.offsetWidth-demo.scrollLeft<0)
      demo.scrollLeft-=demo1.offsetWidth
      else{
      demo.scrollLeft++
      }
      }
      var MyMar=setInterval(Marquee,speed)
      demo.onmouseover=function() {clearInterval(MyMar)}
      demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script></body>
    </html>
      

  4.   


    onmouseover='showbig(this)' ？？自动放大？貌似不行啊...而且我是要按规定尺寸放大的，不可能放到原来那么大。
      

  5.   


    晕哦你在这个showbig函数里，你想他放多大都可以啊，完全由你这个函数来控制好不
      

  6.   


    汗，我还以为是什么内置方法呢...自定义一个函数啊...最后还是要取该图片的ID,但页面中图片的ID可能都是相同的啊。您能写个给我看看吗？
      

  7.   


    不需要ID好不？晕死，你没看到我传递一个this参数过去了吗？
      

  8.   


    我看到了，真的看到了。但function showbig(theimg)
      {
       theimg.height=100;
    theimg.width=120;
      }这样不起作用啊。
      

  9.   

    不起作用？？？
    你拿一个图片试试 肯定管用的<SCRIPT LANGUAGE="JavaScript">
    function showbig(theimg)
    {
    theimg.height=100;
    theimg.width=120;
    }
    </SCRIPT>
    <img src="Winter.jpg" width="100" height="100" onmouseover="showbig(this)">汗水
      

  10.   

     theimg.style.height=100+"px";
        theimg.style.width=120+"px";
      

  11.   

    <SCRIPT LANGUAGE="JavaScript">
    function showbig(theimg)
    {
    theimg.style.height=100+"px";
    theimg.style.width=120+"px";
    }
    </SCRIPT>
    <img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png" width="50" height="30" onmouseover="showbig(this)">
    你说没有效果？？？？
      

  12.   

    SCRIPT LANGUAGE="JavaScript">
    var oldwidth;
    var oldheight;
    function showbig(theimg){
    oldwidth=theimg.width;
    oldheight=theimg.height;
    theimg.style.height=100+"px";
    theimg.style.width=120+"px";
    }
    function showsmall(theimg)
    {
    theimg.style.height=oldheight;
    theimg.style.width=oldwidth;
    }
    </SCRIPT>
    <img src="http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png" width="50" height="30" onmouseover="showbig(this)" onmouseout="showsmall(this)">
      

  13.   


    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
     
    <STYLE type=text/css> 
       ul#hovershow{list-style-type: none; margin: 0px; float: left; display: inline; clear: both;   } 
       ul#hovershow li{ float: left; display: inline; width:64px; height: 64px; margin: 9px;} 
       ul#hovershow li a {display: block;width:91px; height: 91px;} 
       ul#hovershow li a img{border:1px #666 solid; width:100%;height:100%;} 
       ul#hovershow li a:hover{position: absolute; z-index:100;margin: -32px 0 0 -32px;} 
       ul#hovershow li a:hover img{width:128px;height:128px;border:1px red solid;} 
    </STYLE>
    </HEAD><BODY >
    <!--图片不间断开始-->
    <!--图片不间断开始-->
    <DIV id=demo style="OVERFLOW: hidden; WIDTH: 654px; COLOR: #c04020; HEIGHT: 130px; padding-left: 1px">
    <TABLE cellSpacing=0 cellPadding=0 width=654 border=0 cellspace="0">
    <TBODY>
    <TR>
        <TD id=demo1 align=middle height=130>
            <table width=654 border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td>
      <ul id="hovershow"> 
        <li><a href="1#"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" width="10" height="100" alt="test" /></a></li> 
        <li><a href="2#"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" width="10" height="100" alt="test" /></a></li> 
        <li><a href="3#"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" width="10" height="100" alt="test" /></a></li> 
        <li><a href="4#"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" width="10" height="100" alt="test" /></a></li> 
        <li><a href="5#"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" width="10" height="100" alt="test" /></a></li> 
        <li><a href="6#"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" width="10" height="100" alt="test" /></a></li> 

    </ul>
      </td>
                </tr>
            </table>
            </TD>
        <TD id=demo2 width="10">
        </TD>
    </TR>
    </TBODY>
    </TABLE>
    </DIV>
    <SCRIPT>
      var speed=20//速度数值越大速度越慢
      demo2.innerHTML=demo1.innerHTML
      function Marquee(){
      if(demo2.offsetWidth-demo.scrollLeft<0)
      demo.scrollLeft-=demo1.offsetWidth
      else{
      demo.scrollLeft++
      }
      }
      var MyMar=setInterval(Marquee,speed)
      demo.onmouseover=function() {clearInterval(MyMar)}
      demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
                  </SCRIPT>
    <!--图片不间断结束-->
                      <!--图片不间断结束-->
    </BODY>
    </HTML>