随笔 - 59  文章 - 70  trackbacks - 0
<2009年3月>
22232425262728
1234567
891011121314
15161718192021
22232425262728
2930311234

常用链接

留言簿(5)

随笔分类

随笔档案

搜索

  •  

积分与排名

  • 积分 - 172959
  • 排名 - 338

最新评论

阅读排行榜

评论排行榜

    今天上级交个任务下来,说要能够鼠标移动到小图上显示大图,以前做过一次,好多人都是用完全的CSS来实现,我技术水平不够,只能用JS控制了,以前也写过一次,忘了,这次重新写过。
     由于自己写的那个网页内容太多了,把精要的内容贴出来。
        
<style>
#demo
{overflow:hidden;text-align:center;padding:10px;}
#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="1.jpg" onload="displayImage(this,75,100)" style="display:none border:1px solid #eeeeee">
</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 + '" onload="displayImage(this,225,300)" />';
  ei.style.top  
= document.body.scrollTop + event.clientY + 50 + "px";
  ei.style.left 
= document.body.scrollLeft + event.clientX + 50 + "px";
 }

 ts.onmouseout 
= function(){
  ei.innerHTML 
= "";
  ei.style.display 
= "none";
 }

 ts.onclick 
= function(){
  window.open( 
this.src );
 }

}

function displayImage(imgSrc, imgW, imgH)
{
    
    imgSrc.style.display
="block";
    imgOldW 
= imgSrc.width;
    imgOldH 
= imgSrc.height;
    
    
if((imgOldW != 0&& (imgOldH !=0))
    
{
        
        
if(imgOldW <= imgW && imgOldH <= imgH)
        
{
            imgNewW 
= imgOldW;
            imgNewH 
= imgOldH;
        }

        
else
        
{
            imgWH 
= imgW/imgH;      
            imgOldWH 
= imgOldW/imgOldH;
            
            
if(imgWH <= imgOldWH)
            
{
               imgNewW 
= imgW;
               imgNewH 
= imgNewW*(imgOldH/imgOldW);
            }

            
else
            
{
               imgNewH 
= imgH;
               imgNewW 
= imgNewH*(imgOldW/imgOldH);
            }

      
        }

        imgSrc.width  
= imgNewW;
        imgSrc.height 
= imgNewH;
        
return imgSrc;
    }

    
else
    
{
        imgSrc.width 
= imgW;
        imgSrc.height
= imgH;
        
return imgSrc;
    }

}

</script>
posted on 2009-03-05 17:04 JasonChou 阅读(1476) 评论(0)  编辑  收藏 所属分类: html

只有注册用户登录后才能发表评论。


网站导航: