HTML5+CSS3+JavaScript 实现淘宝放大镜
1.在一个里面写的，好复制。。。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝放大镜</title>
<style>
*{
/*建议每次写css，最开始就把内边距 外边距消掉*/
margin: 0;
padding: 0;
}
.par{
/*设置盒子per的样式*/
position: relative;/*相对定位 设置图层的时候记得要把父容器设置为相对定位*/
width: 323px;
height: 506px;
/*border: 1px solid silver;*/
margin-left: 205px;
}
#bgceng{
/*放大镜大图显示位置*/
width: 323px;
height: 430px;
border: 1px solid red;
position: absolute;/*图层要设置绝对定位*/
z-index: 3;/*第三层*/
display: none;/*页面加载不显示*/
left: 325px;
background-size: 750px 1000px;/*背景大小*/
}
.middle_img{
position: relative;/*中图盒子设置相对定位 因为他上边有图层*/
width: 323px;
height: 430px;
border: 1px solid silver;/*下边线*/
}
.middle_img>img {
width: 100%;
height: 100%;
}
#ceng{
/*放大镜*/
border: 1px solid red;
position: absolute;/*图层绝对定位*/
z-index: 2;/*第二层*/
display: none;/*页面加载不显示*/
background: cornflowerblue;
}
.small_img{
width: 323px;
height: 76px;
text-align: center;/*水平居中*/
line-height: 76px;/*给父容器加行高*/
}
.small_img>div{
display: inline-block;/*保持块元素特性，但改为行内元素显示*/
width: 57px;
height: 60px;
border: 1px solid white;
vertical-align: middle;/*加完行高垂直居中*/
}
/*.small_img>div>img{
width: 100%;
height: 100%;
}*//*填充样式，我加完不好看就不加了*/
</style>
</head>
<body>
<!--设置中图小图显示的大盒子-->
<div class="par">
<!--大图图层 设置默认加载图片不平铺 js可以改变行内样式 所以js要用的尽量放在行内-->
<div id="bgceng" style="background: url('image/bg1.jpg') no-repeat"></div>
<!--中图盒子 设置默认加载图片-->
<div class="middle_img">
<!--中图图层 js可以改变行内样式 所以js要用的尽量放在行内-->
<div id="ceng" style="width: 139px; height: 185px;"></div>
<img src="image/middle1.jpg" alt="" id="middle"/>
</div>
<!--小图盒子-->
<div class="small_img">
<!-- 自定义属性 js调用改变中图和大图图片-->
<div class="small" data_middle="image/middle1.jpg" data_bg="image/bg1.jpg"><img src="image/small1.jpg"/></div>
<div class="small" data_middle="image/middle2.jpg" data_bg="image/bg2.jpg"><img src="image/small2.jpg"/></div>
<div class="small" data_middle="image/middle3.jpg" data_bg="image/bg3.jpg"><img src="image/small3.jpg"/></div>
<div class="small" data_middle="image/middle4.jpg" data_bg="image/bg4.jpg"><img src="image/small4.jpg"/></div>
<div class="small" data_middle="image/middle5.jpg" data_bg="image/bg5.jpg"><img src="image/small5.jpg"/></div>
</div>
</div>
</body>
<script>/*尽量用到的变量提前声明*/
/*获取小图 因为用的是同一个类选择器 所以默认是同一个集合 通过下标取元素*/
var smallist=document.getElementsByClassName("small");
/*设置默认小图的边框颜色*/
smallist[0].style.borderColor="red";//js直接操作css行内样式
//记录初始化小图的颜色框
var beforcolor=null;
beforcolor=smallist[0];//存到beforcolor中
/*获取中图盒子位置*/
var middlepar=document.getElementsByClassName("middle_img")[0];
/*获取默认的中图*/
var middle=document.getElementById("middle");
var bg=document.getElementById("bgceng")
var ceng=document.getElementById("ceng");
var big=document.getElementsByClassName("par")[0];
var bgceng=document.getElementById("bgceng")
//循环遍历 获得小图
for(var i=0; i<smallist.length;i++){
//给遍历出的小图添加鼠标进入事件
smallist[i].onmouseenter=function (){
//让之前的图边框变回白色
beforcolor.style.borderColor="white";
//现在的图边框变为红色
this.style.borderColor="red";
//变完就把它替换上一个存到beforcolor中
beforcolor=this;
//中图要随着鼠标进入小图的不同而变化
var middleinfo=this.getAttribute("data_middle");//获取中图自定义属性
//中图的src位置发生变化
middle.src=middleinfo;
//大图也要随着鼠标进入小图的不同而变化
var bginfo=this.getAttribute("data_bg");//获取自定义属性
//因为bg是大图图层位置，所以要调用背景图片
bg.style.backgroundImage="url('"+bginfo+"')";
}
}
//给中图位置设置鼠标进入事件
middlepar.onmouseenter=function (){
//鼠标进入两个图层显示
ceng.style.display="block";
bgceng.style.display="block";
}
//给中图位置设置鼠标离开事件
middlepar.onmouseleave=function (){
//鼠标离开两个图层隐藏
ceng.style.display="none";
bgceng.style.display="none";
}
//添加鼠标移动事件 获取鼠标坐标 图层要跟着鼠标移动
middlepar.onmousemove=function (e){
//获取鼠标坐标
var pagex=e.clientX||e.pageX;
var pagey=e.clientY||e.pageY;
//获取当前对象的左边偏移量和上边偏移量
var left=big.offsetLeft;
var top=big.offsetTop;
//要鼠标在图层中间带着图层移动
pagex=pagex-left-parseInt(ceng.style.width)/2;
pagey=pagey-top-parseInt(ceng.style.height)/2;
//卡边 根据图层左上角的坐标卡
pagex=pagex<=0?0:pagex>=323-parseInt(ceng.style.width)?323-parseInt(ceng.style.width):pagex;
pagey=pagey<=0?0:pagey>=430-parseInt(ceng.style.height)?430-parseInt(ceng.style.height):pagey;
//把获得到的鼠标坐标给图层中心点
ceng.style.left=pagex+"px";
ceng.style.top=pagey+"px";
//显示大图
bgceng.style.backgroundPosition=(-pagex*2.32)+"px "+(-pagey*2.32)+"px";
}
</script>
</html>
2.拆一下 html里外链路径要写对（不用我说了吧）
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝放大镜</title>
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<!--设置中图小图显示的大盒子-->
<div class="par">
<!--大图图层 设置默认加载图片不平铺 js可以改变行内样式 所以js要用的尽量放在行内-->
<div id="bgceng" style="background: url('image/bg1.jpg') no-repeat"></div>
<!--中图盒子 设置默认加载图片-->
<div class="middle_img">
<!--中图图层 js可以改变行内样式 所以js要用的尽量放在行内-->
<div id="ceng" style="width: 139px; height: 185px;"></div>
<img src="image/middle1.jpg" alt="" id="middle"/>
</div>
<!--小图盒子-->
<div class="small_img">
<!-- 自定义属性 js调用改变中图和大图图片-->
<div class="small" data_middle="image/middle1.jpg" data_bg="image/bg1.jpg"><img src="image/small1.jpg"/></div>
<div class="small" data_middle="image/middle2.jpg" data_bg="image/bg2.jpg"><img src="image/small2.jpg"/></div>
<div class="small" data_middle="image/middle3.jpg" data_bg="image/bg3.jpg"><img src="image/small3.jpg"/></div>
<div class="small" data_middle="image/middle4.jpg" data_bg="image/bg4.jpg"><img src="image/small4.jpg"/></div>
<div class="small" data_middle="image/middle5.jpg" data_bg="image/bg5.jpg"><img src="image/small5.jpg"/></div>
</div>
</div>
<!--外链的script 尽量写在最后面 因为存在浏览器加载问题-->
<script src="jsp/demo.js"></script>
</body>
</html>
css 样式
*{
/*建议每次写css，最开始就把内边距 外边距消掉*/
margin: 0;
padding: 0;
}
.par{
/*设置盒子per的样式*/
position: relative;/*相对定位 设置图层的时候记得要把父容器设置为相对定位*/
width: 323px;
height: 506px;
/*border: 1px solid silver;*/
margin-left: 205px;
}
#bgceng{
/*放大镜大图显示位置*/
width: 323px;
height: 430px;
border: 1px solid red;
position: absolute;/*图层要设置绝对定位*/
z-index: 3;/*第三层*/
display: none;/*页面加载不显示*/
left: 325px;
background-size: 750px 1000px;/*背景大小*/
}
.middle_img{
position: relative;/*中图盒子设置相对定位 因为他上边有图层*/
width: 323px;
height: 430px;
border: 1px solid silver;/*下边线*/
}
.middle_img>img {
width: 100%;
height: 100%;
}
#ceng{
/*放大镜*/
border: 1px solid red;
position: absolute;/*图层绝对定位*/
z-index: 2;/*第二层*/
display: none;/*页面加载不显示*/
background: cornflowerblue;
}
.small_img{
width: 323px;
height: 76px;
text-align: center;/*水平居中*/
line-height: 76px;/*给父容器加行高*/
}
.small_img>div{
display: inline-block;/*保持块元素特性，但改为行内元素显示*/
width: 57px;
height: 60px;
border: 1px solid white;
vertical-align: middle;/*加完行高垂直居中*/
}
/*.small_img>div>img{
width: 100%;
height: 100%;
}*//*填充样式，我加完不好看就不加了*/
js文件
/*尽量用到的变量提前声明*/
/*获取小图 因为用的是同一个类选择器 所以默认是同一个集合 通过下标取元素*/
var smallist=document.getElementsByClassName("small");
/*设置默认小图的边框颜色*/
smallist[0].style.borderColor="red";//js直接操作css行内样式
//记录初始化小图的颜色框
var beforcolor=null;
beforcolor=smallist[0];//存到beforcolor中
/*获取中图盒子位置*/
var middlepar=document.getElementsByClassName("middle_img")[0];
/*获取默认的中图*/
var middle=document.getElementById("middle");
var bg=document.getElementById("bgceng")
var ceng=document.getElementById("ceng");
var big=document.getElementsByClassName("par")[0];
var bgceng=document.getElementById("bgceng")
//循环遍历 获得小图
for(var i=0; i<smallist.length;i++){
//给遍历出的小图添加鼠标进入事件
smallist[i].onmouseenter=function (){
//让之前的图边框变回白色
beforcolor.style.borderColor="white";
//现在的图边框变为红色
this.style.borderColor="red";
//变完就把它替换上一个存到beforcolor中
beforcolor=this;
//中图要随着鼠标进入小图的不同而变化
var middleinfo=this.getAttribute("data_middle");//获取中图自定义属性
//中图的src位置发生变化
middle.src=middleinfo;
//大图也要随着鼠标进入小图的不同而变化
var bginfo=this.getAttribute("data_bg");//获取自定义属性
//因为bg是大图图层位置，所以要调用背景图片
bg.style.backgroundImage="url('"+bginfo+"')";
}
}
//给中图位置设置鼠标进入事件
middlepar.onmouseenter=function (){
//鼠标进入两个图层显示
ceng.style.display="block";
bgceng.style.display="block";
}
//给中图位置设置鼠标离开事件
middlepar.onmouseleave=function (){
//鼠标离开两个图层隐藏
ceng.style.display="none";
bgceng.style.display="none";
}
//添加鼠标移动事件 获取鼠标坐标 图层要跟着鼠标移动
middlepar.onmousemove=function (e){
//获取鼠标坐标
var pagex=e.clientX||e.pageX;
var pagey=e.clientY||e.pageY;
//获取当前对象的左边偏移量和上边偏移量
var left=big.offsetLeft;
var top=big.offsetTop;
//要鼠标在图层中间带着图层移动
pagex=pagex-left-parseInt(ceng.style.width)/2;
pagey=pagey-top-parseInt(ceng.style.height)/2;
//卡边 根据图层左上角的坐标卡
pagex=pagex<=0?0:pagex>=323-parseInt(ceng.style.width)?323-parseInt(ceng.style.width):pagex;
pagey=pagey<=0?0:pagey>=430-parseInt(ceng.style.height)?430-parseInt(ceng.style.height):pagey;
//把获得到的鼠标坐标给图层中心点
ceng.style.left=pagex+"px";
ceng.style.top=pagey+"px";
//显示大图
bgceng.style.backgroundPosition=(-pagex*2.32)+"px "+(-pagey*2.32)+"px";
}