您的位置：首页 > Web前端 > JavaScript

图片局部放大原生js，html代码

2017-04-19 14:28 405 查看

代码主要是3部分，JS部分，小图部分，大图部分。实现原理：小图和大图是用的同一张图片，为了清晰效果，图片要足够大，大图父标签是一个DIV，溢出隐藏属性，鼠标进入小图就采集坐标，改变大图的上左边距来把同坐标的部分移入到父div中，因为父div比大图小，溢出隐藏可见部分，呈现在页面的就是图片的一部分并且是大图没缩小过。

图片路径引用自己的图片即可。

代码部分：

<html>

<head>

<style>

#min_div{ width:167px;height:113px;position: relative; top:0px; left:0px; overflow:hidden; cursor:move;}

#min_div #min_img{ width:167px; height:113px;}

#min_div #min_img_t{ position: absolute;z-index:1;display:none;}

#max_div{ position: absolute; top: 200px; left:20px; width:500px; height:370px; overflow:hidden; display:none;}

#max_div #max_img{ width:835px; height:565px;}

</style>

</head>

<body>

<script>

function likai(){
document.getElementById("max_div").style.display="none";
document.getElementById("min_img_t").style.display="none";
}

function getMousePos(event) {
document.getElementById("max_div").style.display="block";
document.getElementById("min_img_t").style.display="block";
var e = event || window.event;
var scrollX = document.documentElement.offsetLeft || document.body.offsetLeft;
var scrollY = document.documentElement.offsetTop || document.body.offsetTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//alert('x: ' + x + '\ny: ' + y);
return { 'x': x, 'y': y };
//console.log

}

function test(e){
var jj=getMousePos(e).x-document.getElementById("min_div").offsetLeft-50;
var gg=getMousePos(e).y-document.getElementById("min_div").offsetTop-37;
if(jj<0){jj=0;}else{if(jj>67){jj=67;}}
if(gg<0){gg=0;}else{if(gg>38){gg=38;}}
document.getElementById("min_img_t").style.marginLeft=jj+"px"
document.getElementById("min_img_t").style.marginTop=gg+"px"
document.getElementById("max_img").style.marginLeft=-jj*5+"px"
document.getElementById("max_img").style.marginTop=-gg*5+"px"

};

</script>

<div id="min_div" onmousemove="test(event)" onmouseout="likai()">
<img id="min_img_t" src="min_img_t.png">
<img src="timg.jpg" alt="{$product[title]}" width="167" height="113" id="test_img" id="min_img"/>

</div>



<div id="max_div">
<img id="max_img" src="timg.jpg" />

</div>



</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航