随笔 - 59  文章 - 70  trackbacks - 0
<2009年3月>
日一二三四五六
22232425262728
1234567
891011121314
15161718192021
22232425262728
2930311234

常用链接

留言簿(5)

随笔分类

随笔档案

搜索

  •  

积分与排名

  • 积分 - 172118
  • 排名 - 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 阅读(1468) 评论(0)  编辑  收藏 所属分类: html

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 JasonChou Powered by: 博客园 模板提供：沪江博客