大家好，我是范凯，本次将为大家讲解一下放大器在Javascript中的实现，希望对大家有所帮助。
放大器在购物网站中很常用，京东，淘宝，都会用到放大器的相关知识，而本次博客将为大家介绍使用javascript编写放大器的例子。
注：本次使用的图片 基本图片：名称：iphone.jpg 宽：350像素 高：350像素
放大图片：名称：iphone_big.jpg 宽：800像素 高：800像素
下面是javascript放大器实现的具体步骤：
方案一<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--第二步：把基本的html代码写好后，我们为其添加样式-->
<!--第二步内容--开始-->
<style>
/*是全步html元素padding和margin为0*/
*{
padding: 0;
margin: 0;
}
#div_origin {
/*因为基本图片的像素是350*350,因此我们把此div设置为宽:350,高:350*/
width:350px;
height: 350px;
/*这里可以任意设置top和left的值.*/
top:50px;
left:60px;
/*此div绝对定位*/
position: absolute;
/*为了使页面美观,添加box-shadow样式(阴影效果)*/
box-shadow: 4px 4px 10px 3px gray;
}
#div_big {
/*使显示放大区域宽350 高350,当然,此区域也可以任意设置*/
width: 350px;
height: 350px;
/*使显示放大区域左边和上边为380和50,其实此样式也可以任意设置*/
left:480px;
top:50px;
/*/把放大区域改为圆形*/
border-radius: 50%;
/*为了使页面美观,添加box-shadow样式*/
box-shadow: 4px 4px 10px 3px gray;
position: absolute;
/*!!!把超过此区域的图片隐藏!!*/
overflow: hidden;
/********第四步加上下样式，鼠标移入在出现********/
display: none;
}
/*设置被放大圆形区域样式*/
#enlarge_area {
/*此区域的宽和高是根据， 基本div的宽高乘以放大区域div的宽高 再除以大图片的宽高得出 既350*350/800, 按给出两张图片比例求取放大区域*/
width: 153px;
height: 153px;
border-radius: 50%;
opacity: 0.7;
background: gray;
position: absolute;
/********第四步加上下样式，鼠标移入在出现********/
display: none;
}
/*把图片设置为绝对定位,可以是灰色放大圆形区域在图片上方*/
img {
position: absolute;
}
</style>
<!--第二步内容--结束-->
</head>
<body>
<!--第一步：在body中写入，放大器的基本实现布局-->
<!--第一步内容--开始-->
<div id="div_origin">
<img src="img/iphone.jpg" />
<!--因为我们要在基本图片中展示一个圆形区域，用于放大此区域内的图片，故需要创建一个div，且给div的boder-radius赋为50%-->
<div id="enlarge_area"></div>
</div>
<div id="div_big">
<img src="img/iphone_big.jpg" />
</div>
<!--第一步内容--结束-->
</body>
<script>
// 第三步：使用javascript得到DOM对象
var oDiv = document.getElementById("div_origin");
var bigDiv = document.getElementById("div_big");
var eaDiv = document.getElementById("enlarge_area");//eaDiv是enlarge_areaDiv的缩写
//在第六步时才加入下行代码，表示要用到bigDiv里面的图片的，要让这个大图动起来
var bigImg = bigDiv.getElementsByTagName("img")[0];
// 第四步:当鼠标移入oDiv后,bigDiv和eaDiv才出现, 鼠标离开消失
oDiv.onmouseenter = function(){
bigDiv.style.display = "block";
eaDiv.style.display = "block";
}
oDiv.onmouseleave = function(){
bigDiv.style.display = "none";
eaDiv.style.display = "none";
}
// 第五步:当鼠标在oDiv内移动时,圆形区域会跟随鼠标光标移动, 且不会移出oDiv
// 注:第五步为关键步骤,请大家仔细思量.在此我会将第五步分为几个小步骤.
oDiv.onmousemove = function(e){
e = e || event //浏览器兼容
// 5.1:当鼠标移入oDiv圆形eaDiv会跟着鼠标移动
//5.2步会续写此公式 eaDiv.style.left = e.clientX + 'px';
//5.2步会续写此公式 eaDiv.style.top = e.clientY + 'px';
// 但发现鼠标没有在圆形eaDiv中心,而是eaDiv外面
// 这是由于1.要想鼠标在圆形eaDiv中心需要鼠标光标减去圆形半径e.clientX - eaDiv.offsetWidth/2
// 2.因为圆形eaDiv的父级是oDiv,且oDiv又向右偏离了60px, 故需要再减去oDiv.offsetLeft
// 因此得到5.2步公式（如下）!!!!!一定要注意px单位
//第5.4步，由于会继续给eaDiv.style.left和eaDiv.style.top赋值
//故把eaDiv.style.left 改为esl
//且把eaDiv.style.top 改为est (三个单词首字母缩写)
//且去掉px单位
//5.2步公式 eaDiv.style.left = e.clientX - oDiv.offsetLeft - eaDiv.offsetWidth/2 + 'px';
//5.2步公式 eaDiv.style.top = e.clientY - oDiv.offsetTop - eaDiv.offsetHeight/2 + 'px';
esl = e.clientX - oDiv.offsetLeft - eaDiv.offsetWidth/2;
est = e.clientY - oDiv.offsetTop - eaDiv.offsetHeight/2;
// 圆形eaDiv已可随鼠标随意移动,但圆形eaDiv也能移出oDiv区域,这是我们不想看到的
// 故规定出圆形eaDiv活动的区域,因为圆形eaDiv的父级是oDiv所以它的上边界和左边界为0
// 下边界和右边界为5.3公式(如下),就是oDiv的的宽度和高度减去圆形eaDiv的半径。
var topBorder = 0;
var rightBorder = oDiv.offsetWidth - eaDiv.offsetWidth;
var bottomBorder = oDiv.offsetHeight - eaDiv.offsetHeight;
var leftBorder = 0;
// 圆形eaDiv超过上边,则把topBorder赋给top,超过右边则把rightBorder赋给left,超过下边界则把bottomBorder赋给top,
// 超过左边界,则把leftBorder赋给left,如下图所示:！！！！！！！
// 得出以下公式:5.4
if(esl < leftBorder) {
eaDiv.style.left = leftBorder + 'px';
//第六步加1
bigImg.style.left = 0; //bigDiv的leftborder也是0
} else {
if (esl > rightBorder) {
eaDiv.style.left = rightBorder + 'px';
//第六步加2 如果圆形eaDiv在oDiv右侧将要超越界限
bigImg.style.left = bigDiv.offsetWidth - bigImg.offsetWidth + 'px';
} else { //如果圆形eaDiv在oDiv限制区域中则，则执行下代码
eaDiv.style.left = esl + 'px';
//第六步加3
bigImg.style.left = esl * -2.3 + 'px';
}
}
if(est < topBorder) {
eaDiv.style.top = topBorder + 'px';
//第六步加4
bigImg.style.top = 0;
} else {
if(est > bottomBorder){
eaDiv.style.top = bottomBorder;
//第六步加5
bigImg.style.top = bigDiv.offsetHeight - bigImg.offsetHeight;
} else {//如果圆形eaDiv在oDiv限制区域中则，则执行下代码
eaDiv.style.top = est + 'px';
//第六步加6
bigImg.style.top = est * -2.3 + 'px';
}
}
// 5.4步完成后如果圆形eaDiv可在oDiv限制区域内运动
// 第六步:根据圆形eaDiv所在位置,移动bigDiv中的大图片.首先要明确.在bigDiv中
// bigDiv是不动的,动的是里面的图片.且图片和圆形eaDiv是相反移动.
// 第二要知道:在oDiv中eaDiv走了oDiv的宽（350)减去eaDiv（153)的宽的距离（197) .而bigDiv中图片需要走
// bigImg的宽（800)减去bigDiv（350)的距离（450),故上述代码第六步加3和第六步加6中,由450/197 = 2.3得出
}
</script>
</html>
第二种<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 350px;
height: 350px;
position: relative;
margin: 0 auto;
}
#box .booth{
width: 350px;
height: 350px;
box-shadow: 3px 3px 8px 3px gray;
background-color: #3b7796;
}
.booth .booth_big{
width: 350px;
height: 350px;
position: absolute;
left: 105%;
top:0;
overflow: hidden;
display: none;
background: url("iphone_big.jpg")no-repeat;
}
.booth:hover .booth_big{
display: block;
}
/*鼠标移动到class名为booth这个div上让class名booth_big的div出现*/
.booth:hover .zoom{
display: block;
cursor: move;
}
/*鼠标移动到class名为booth这个div上让class名zoom的div出现*/
.booth .zoom{
width: 175px;
height: 175px;
position: absolute;
top: 0;
background-color: red;
opacity: 0.5;
display: none;
}
</style>
</head>
<body>
<div id="box">
<div class="booth">
<div><img src="iphone.jpg" alt=""></div>
<div class="zoom"></div>
<div class="booth_big"></div>
</div>
</div>
</body>
<script>
var box=document.getElementById("box");
var booth=document.getElementsByClassName("booth")[0];
var zoom=document.getElementsByClassName("zoom")[0];
var zoomImg=document.getElementById("zoomImg");
var boothBig=document.getElementsByClassName("booth_big")[0];
booth.onmousemove=function(ev){//当鼠标放在booth上面是开始执行
// var x= ev.clientX-this.parentNode.offsetLeft-90;
// var y= ev.clientY-this.parentNode.offsetTop-90;
// parentNode 获取父级（上一级）
var x= ev.clientX-box.offsetLeft-90;
var y= ev.clientY-box.offsetTop-90;
//上面两句是让鼠标在放大镜的中间
//var x=ev.clientX-90;如果放大镜是用图片做的不建议用 有bug
//var y=ev.clientY-90;
x=x<0?0:x>175?175:x;
y=y<0?0:y>176?176:y;
// 下面的代码（if判断）就是上面的代码
// if(x<0){
// x=0
// }else {
// x=x
// }
// if(x>175) {
// x=175
// }else {
// x=x;
// }
zoom.style.left=x+"px";
zoom.style.top=y+"px";
//上面两句代码是让你的放大镜跟随鼠标移动
var px=x/175*100+"%";
var py=y/175*100+"%";
boothBig.style.backgroundPosition=px+" "+py;//记住两个双引号中间一定要有空格
// 上面的代码是让放大的图片可以跟着你的放大镜移动
};
</script>
</html>
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
