简明现代魔法 -> web设计理念 -> 鼠标经过显示大图的效果

鼠标经过显示大图的效果

2011-04-13

做个页面,需要这么一个功能,就是鼠标经过缩略图的时候同时显示该缩略图的大图,网上搜了一下,垃圾站太多了,所以还是自己写了一个。比较简单,但是还是在这里记录一下,浏览器测试还没做,在Chrome下运行没问题,仅供参考吧。

效果演示

Code

<style type="text/css">
.demo{ overflow:hidden; width:150px; text-align:center; padding:5px;}
.demo img{ border:none; width:130px; border:5px solid #f4f4f4; }
#enlarge_images{ position:absolute; display:none; z-index:2; }
#enlarge_images img{ border:5px solid #f4f4f4; }
</style>

<div id="enlarge_images"><img src=""></div>

<div id="box">
    <div class="demo">
        <img src="../images/1.jpg">
    </div>

    <div class="demo">
        <img src="../images/2.jpg">
    </div>

    <div class="demo">
        <img src="../images/3.jpg">
    </div>

    <div class="demo">
        <img src="../images/4.jpg">
    </div>
</div>

<script type="text/javascript">
var maxsize = 450;	//图片最大尺寸
var obj = document.getElementById("box").getElementsByTagName("img"), j = obj.length;
var bigpic = document.getElementById("enlarge_images");

for(i=0; i<j; i++)
{
    obj[i].onmousemove = function(){
		/*调整图片尺寸start*/
		var thisimg = new Image();
        thisimg.src = this.src;
        var r = thisimg.width/thisimg.height;
        if (r>=1)
		{
			w = maxsize;
			h = maxsize/r;
		}
       	else
		{
			w = maxsize*r;
			h = maxsize;
		}   
        bigpic.getElementsByTagName("img")[0].style.width = w+"px";
        bigpic.getElementsByTagName("img")[0].style.height = h+"px";
		/*调整图片尺寸end*/
        bigpic.style.display = "block";
        bigpic.style.left  = this.offsetWidth + 30 + "px";
        bigpic.style.top = document.body.scrollTop + (event|| window.event).clientY - 340 + "px";
        bigpic.getElementsByTagName("img")[0].src = this.src;
    }

    obj[i].onmouseout = function(){
  		bigpic.style.display = "none";
        bigpic.getElementsByTagName("img")[0].src = "";
    }

    obj[i].onclick = function(){
        window.open( this.src);
    }
}
</script>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们