<!----大家好,我是小张,本次将为大家讲解一下放大器在Javascript中的实现,希望对大家有所帮助。 | |
放大器在购物网站中很常用,京东,淘宝,都会用到放大器的相关知识,而本次博客将为大家介绍使用javascript编写放大器的例子。 | |
注:本次使用的图片 基本图片:名称:iphone.jpg 宽:350像素 高:350像素 | |
放大图片:名称:iphone_big.jpg 宽:800像素 高:800像素 | |
下面是javascript放大器实现的具体步骤: --> | |
<!DOCTYPE html> | |
<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> | |
javascript放大器实现
最新推荐文章于 2023-11-25 23:43:10 发布