鼠标经过图片变大简单实现

简单的鼠标经过图片变大效果

<style type="text/css">
.demo{ overflow:hidden; width:150px; text-align:center; padding:5px;}
.demo img{ border:none; width:130px; border:5px solid #f4f4f4; }
#Big_Images{ position:absolute; display:none; z-index:2; }
#Big_Images img{ border:5px solid #f4f4f4; }
</style>
<body>
<div id="Big_Images"><img src=""></div>	<!-- 显示大图的层 -->	
<div id="box">
    <div class="demo">
        <img src="../Image/极简.jpg">
    </div>
    <div class="demo">
        <img src="../Image/极简1.jpg">
    </div>
    <div class="demo">
        <img src="../Image/极简2.jpg">
    </div>
    <div class="demo">
        <img src="../Image/极简3.jpg">
        </div>
    </div>
    
    <script type="text/javascript">
    var maxsize = 650;	//图片最大尺寸
    var img = document.getElementById("box").getElementsByTagName("img");	//获取图片对象
    var L = img.length;	//图片对象个数
    var bigpic = document.getElementById("Big_Images");		//获取显示大图的对象
    for(i=0; i<L; i++)
    {
        img[i].onmousemove = function(){	//鼠标移动事件
            /*调整图片尺寸start*/
            var thisimg = new Image();		//初始化一个图片对象
            thisimg.src = "http://blog.51cto.com/viewpic.php?refimg=" + this.src;		// 获取图片地址 赋给图片对象
            var r = thisimg.width/thisimg.height;	
                //等比例缩放图片
            if (r>=1)
            {
                w = maxsize;
                h = maxsize/r;
            }
            else
            {
                w = maxsize*r;
                h = maxsize;
            }
               
             //大图的宽高根据宽高比例进行设置img 的宽高  
            bigpic.getElementsByTagName("img")[0].style.width = w+"px";
            bigpic.getElementsByTagName("img")[0].style.height = h+"px";
            
            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 = "http://blog.51cto.com/viewpic.php?refimg=" + this.src;		//给img 添加链接
        }
        
        
    }
    </script>



你可能感兴趣的:(JavaScript,图片变大,JS鼠标)