获取淘宝放大图的两种方法：
- 拿到小图链接：https://img.alicdn.com/imgextra/i4/3052844659/O1CN01wxVw5d1kHrmPwXGn6_!!3052844659.jpg_50x50.jpg_.webp 把 .jpg_50x50 删除就是放大的图片。
-
控制台路径： F12 的 Application →Frames →Images → 方向键查找图片
淘宝京东图片放大镜实例.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜实例！</title>
<style>
* {margin: 0;padding: 0;}
.box {
width: 300px;
height: 400px;
margin: 80px;
position: relative;
}
.box .zoom {
position: absolute;
top: 0;
left: 0;
width: 160px;
height: 160px;
background: url(https://gtms01.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png) repeat 0 0 ;
cursor: move;
display: none;
}
.box .large {
position: absolute;
left: 350px;
top: 0;
background: url(images/large.jpg) no-repeat;
width: 400px;
height: 400px;
display: none;
}
</style>
</head>
<body>
<div class="box" id= "box">
<img src="images/small.jpg" alt="睡衣">
<div class="zoom" id= "zoom"></div>
<div class="large" id = "large"></div>
</div>
<script>
var box = document.getElementById("box");
var zoom = document.getElementById("zoom");
var large = document.getElementById("large");
//小图相对于大图的缩放比例
var rate = 140 / 350;
//鼠标进入显示zoom和large
box.onmouseover = function(){
zoom.style.display = "block";
large.style.display = "block";
}
//鼠标离开隐藏zoom和large
box.onmouseout = function(){
zoom.style.display = "none";
large.style.display = "none";
}
//移动事件的监听，移动范围定义在box里
box.onmousemove = function(event){
//处理event的兼容
event = event || window.event;
//得到页面的卷动值
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//(getAllLeft(box) - scrollLeft)先计算box的净left值减去卷动值，得到类似box盒子没有父定位盒子和卷动值的offsetleft
//(getAllTop(box) - scrollTop)先计算box的净top值减去卷动值，得到类似box盒子没有父定位盒子和卷动值的offsettop
//x , y表示zoom盒子在box盒子里面x,y的距离。
//最后减去八十，八十是zoom盒子宽的一半，目的是让鼠标在zoom盒子中间
var x = event.clientX - (getAllLeft(box) - scrollLeft) - 80;
var y = event.clientY - (getAllTop(box) - scrollTop) - 80 ;
//此处的if语句目的是让zoom盒子移动时不能超出box盒子的范围
if(x < 0){
x = 0;
}else if(x > 140){
x = 140;
}
if(y < 0){
y = 0;
}else if(y > 240){
y = 240;
}
//更改zoom盒子在box盒子里的位置
zoom.style.left = x + "px";
zoom.style.top = y + "px";
//更改大图large盒子里background-position的位置，同时通过rate与zoom的移动距离保持一致
large.style.backgroundPosition = -x/rate + "px" +" " + -y/rate+ "px";
//封装函数用来得到对象obj的净top值
function getAllTop(obj){
var Alltop = obj.offsetTop;
var currentobj = obj;
while(currentobj = currentobj.offsetParent){
Alltop += currentobj.offsetTop;
}
return Alltop;
}
//封装函数用来得到对象obj的净left值
function getAllLeft(obj){
var Allleft = obj.offsetLeft;
var currentobj = obj;
while(currentobj = currentobj.offsetParent){
Allleft += currentobj.offsetLeft;
}
return Allleft;
}
}
</script>
</body>
</html>
为了降低耦合性对程序进行改动如下：
- 放大镜 zoom 盒子定位中心点的方法由减去八十改为
zoom.offsetWidth/2 - if 语句防止放大镜 zoom盒子出线的值改为根据盒子本身宽调整大小。
140→box.offsetHeight - zoom.offsetHeight
240→box.offsetHeight - zoom.offsetHeight - rate 比率修改，要是想降低 rate 的耦合性，就不能使用背景定位法，必须改用绝对定位方法。使用
overflow: hidden;
修改后的源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜实例！</title>
<style>
* {margin: 0;padding: 0;}
.box {
width: 300px;
height: 400px;
margin: 80px;
position: relative;
}
.box .zoom {
position: absolute;
top: 0;
left: 0;
width: 160px;
height: 160px;
background: url(https://gtms01.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png) repeat 0 0 ;
cursor: move;
display: none;
}
.box .large {
position: absolute;
left: 350px;
top: 0;
/*background: url(images/large.jpg) no-repeat;*/
width: 400px;
height: 400px;
display: none;
overflow: hidden;
}
.box .large .pic {
position: absolute;
}
</style>
</head>
<body>
<div class="box" id= "box">
<img src="images/small.jpg" alt="睡衣">
<div class="zoom" id= "zoom"></div>
<div class="large" id = "large"><img src="images/large.jpg" alt="" id="pic" class = "pic"></div>
</div>
<script>
var box = document.getElementById("box");
var zoom = document.getElementById("zoom");
var large = document.getElementById("large");
var pic = document.getElementById("pic");
//小图相对于大图的缩放比例
// var rate = 140 / 350;
//鼠标进入显示zoom和large
box.onmouseover = function(){
zoom.style.display = "block";
large.style.display = "block";
}
//鼠标离开隐藏zoom和large
box.onmouseout = function(){
zoom.style.display = "none";
large.style.display = "none";
}
//移动事件的监听，移动范围定义在box里
box.onmousemove = function(event){
//只有触发move事件zoom.offsetWidth和large.offsetWidth才有值。
var rate = (box.offsetWidth - zoom.offsetWidth) / (pic.offsetWidth - large.offsetWidth);
//处理event的兼容
event = event || window.event;
//得到页面的卷动值
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//(getAllLeft(box) - scrollLeft)先计算box的净left值减去卷动值，得到类似box盒子没有父定位盒子和卷动值的offsetleft
//(getAllTop(box) - scrollTop)先计算box的净top值减去卷动值，得到类似box盒子没有父定位盒子和卷动值的offsettop
//x , y表示zoom盒子在box盒子里面x,y的距离。
//最后减去八十，八十是zoom盒子宽的一半，目的是让鼠标在zoom盒子中间
var x = event.clientX - (getAllLeft(box) - scrollLeft) - zoom.offsetWidth/2;
var y = event.clientY - (getAllTop(box) - scrollTop) - zoom.offsetWidth/2;
//此处的if语句目的是让zoom盒子移动时不能超出box盒子的范围
if(x < 0){
x = 0;
}else if(x > box.offsetWidth - zoom.offsetWidth){
x = box.offsetWidth-zoom.offsetWidth;
}
if(y < 0){
y = 0;
}else if(y > box.offsetHeight - zoom.offsetHeight){
y = box.offsetHeight - zoom.offsetHeight;
}
//更改zoom盒子在box盒子里的位置
zoom.style.left = x + "px";
zoom.style.top = y + "px";
//更改大图large盒子里background-position的位置，同时通过rate与zoom的移动距离保持一致
// large.style.backgroundPosition = -x/rate + "px" +" " + -y/rate+ "px";
pic.style.left = -x/rate + "px";
pic.style.top = -y/rate+ "px";
//封装函数用来得到对象obj的净top值
function getAllTop(obj){
var Alltop = obj.offsetTop;
var currentobj = obj;
while(currentobj = currentobj.offsetParent){
Alltop += currentobj.offsetTop;
}
return Alltop;
}
//封装函数用来得到对象obj的净left值
function getAllLeft(obj){
var Allleft = obj.offsetLeft;
var currentobj = obj;
while(currentobj = currentobj.offsetParent){
Allleft += currentobj.offsetLeft;
}
return Allleft;
}
}
</script>
</body>
</html>
网友评论