【淘宝】图片放大代码

最新推荐文章于 2024-05-27 12:53:44 发布

比特造梦

最新推荐文章于 2024-05-27 12:53:44 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/u011490072/article/details/78604438

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片放大效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#small {
width: 300px;
height: 300px;
border: 1px solid #cdcdcd;
}
#small>img {
width: 300px;
height: 300px;
}
#slider {
width: 140px;
height: 140px;
background: rgba(135,135,135,0.4);
position: absolute;
top: 0;
display: none;

}
#big {
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 310px;
border: 1px solid #cdcdcd;
overflow: hidden;
display: none;
}
</style>
</head>
<body>

<div id="small">
<img src="max.jpg" />

<div id="slider"></div>
</div>


<div id="big">
<img src="max.jpg" />
</div>

<script type="text/javascript">
var small = document.getElementById("small");
var slider = document.getElementById("slider");
var big = document.getElementById("big");
var bigImg = document.getElementsByTagName("img")[1];

//让slider跟随鼠标移动.给小的方块绑定事件
small.onmousemove = function(e) {
var even = e || event; //兼容火狐浏览器
var x = even.clientX - small.offsetLeft - slider.offsetWidth/2;
var y = even.clientY - small.offsetTop - slider.offsetHeight/2;
//水平方向的最大值
var maxX = small.clientWidth - slider.clientWidth;
//竖直方向的最大值
var maxY = small.clientHeight - slider.clientHeight;
if(x<0){
//相当于超出左侧,超出左侧时,拉回
x=0;
}
//超出右侧时拉回
if(x>maxX){
x = maxX;
}
//顶部超出
if(y<0){
y=0;
}
//底部超出
if(y>maxY){
y = maxY;
}
slider.style.top = y + "px";
slider.style.left = x + "px";
//放大的图片的主要实现代码:一个比例计算
big.scrollLeft = x/maxX * (bigImg.clientWidth - big.clientWidth) ;
big.scrollTop = y/maxY * (bigImg.clientHeight -big.clientHeight) ;
}
//鼠标移入事件
small.onmouseenter = function(){
//鼠标移入到原图时候实现,上面出现的小的方块
slider.style.display = "block";
//右侧的大图区域显示出来图片
big.style.display = "block";
}
//添加鼠标移出事件,鼠标移出原图的时候,
small.onmouseleave = function(){
slider.style.display = "none";
big.style.display = "none";
}
</script>
</body>
</html>

比特造梦

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【淘宝】图片放大代码

图片放大效果 * { margin: 0; padding: 0; } #small { width: 300px; height: 300px; border: 1px solid #cdcdcd; } #small>img { width: 300px; height: 300px; } #
复制链接

扫一扫