2018-12-01
JS实现放大镜功能
网店中的商品都能放大查看细节，这里是放大功能的简单实现。。。。
这个放大镜具有选择放大倍数的功能。
效果：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/lens.css" />
<script type="text/javascript" src="js/lens.js" ></script>
</head>
<body>
<div class="small">
<span class="tobig"></span>
<img src="img/1367482836394.jpg" />
</div>
<div class="big">
<img src="img/1367482836394.jpg"/>
</div>
放大倍数：<input value="2" class="multiple"/><button class="set">设置</button>
<div class="picc">
<img src="img/1367482836394.jpg" class="pics"/>
<img src="img/1370512282166.jpg" class="pics"/>
<img src="img/1373337078811.jpg" class="pics"/>
<img src="img/20131227141118_VPjfy.jpeg" class="pics"/>
<img src="img/20151015011741324.png" class="pics"/>
</div>
</body>
</html>
CSS部分：
*{
margin: 0px;
}
.small img{
width: 300px;
height: 400px;
}
.small{
width: 300px;
height: 400px;
}
.big img{
position: absolute;
width: 600px;
height: 800px;
}
.big{
position: absolute;
top: 8px;
left: 310px;
width: 300px;
height: 400px;
overflow: hidden;
display: none;
}
.tobig{
width: 150px;
height: 200px;
position: absolute;
background-color: rgba(255,255,255,.4);
cursor: move;
display: none;
}
/***************底部可选图片*********************/
.picc{
position: relative;
top: 9px;
}
.picc img{
width: 60px;
height: 50px;
background-color: blue;
}
.picc img:hover{
box-shadow: 0 0 5px 5px dodgerblue;
}
.picc img:active{
box-shadow: 0 0 5px 5px blue;
}
.set:active{
background-color: pink;
border-radius: 8px;
}
JS部分：
window.onload = function() {
var osmall = document.getElementsByClassName("small")[0];
var otobig = document.getElementsByClassName("tobig")[0];
var obig = document.getElementsByClassName("big")[0];
var osmallpic=document.getElementsByTagName("img")[0];
var obigpic=document.getElementsByTagName("img")[1];
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~//
var omultiple=document.getElementsByClassName("multiple")[0];
var oset=document.getElementsByClassName("set")[0];
osmall.onmouseout = function() {
otobig.style.display = "none";
obig.style.display = "none";
}
osmall.onmousemove = function(event) {
otobig.style.display = "block";
obig.style.display = "block";
var oleft = event.clientX - otobig.offsetWidth / 2;
var otop = event.clientY - otobig.offsetHeight / 2;
if(oleft < 0) {
oleft = 0;
} else if(oleft > osmall.offsetWidth - otobig.offsetWidth) {
oleft = osmall.offsetWidth - otobig.offsetWidth;
}
if(otop < 0) {
otop = 0;
} else if(otop > osmall.offsetHeight - otobig.offsetHeight) {
otop = osmall.offsetHeight - otobig.offsetHeight;
}
var onumeral=omultiple.value;
otobig.style.left = oleft + "px";
otobig.style.top = otop + "px";
obigpic.style.left=-(oleft*onumeral)+'px';
obigpic.style.top=-(otop*onumeral)+'px';
}
//~~~~~~~~~~~~~~~~设置放大倍数~~~~~~~~~~~~~~~~~//
oset.onclick=function(){
var onumeral=omultiple.value;//获取放大的倍数
var a=obigpic.width;//获取大图的宽度
var b=osmallpic.width;//获取小图的宽度
a=b*onumeral;//把大图放大到指定倍数
document.getElementsByTagName("img")[1].style.width=a+'px';//放大宽度
var c=obigpic.height;
var d=osmallpic.height;
c=d*onumeral;
document.getElementsByTagName("img")[1].style.height=c+'px';//放大高度
/**************改变tobig框的大小******************/
//左边tobig框的宽度占左图的比例==右边展示框占右图的比例//
var bili1=b/a;
otobig.style.width=bili1*300+'px';
var bili2=d/c;
otobig.style.height=bili2*400+'px';
}
//改变图片路径
var opics=document.getElementsByClassName("pics");
opics[0].onclick=function(){
osmallpic.src="img/1367482836394.jpg";
obigpic.src="img/1367482836394.jpg";
}
opics[1].onclick=function(){
osmallpic.src="img/1370512282166.jpg";
obigpic.src="img/1370512282166.jpg";
}
opics[2].onclick=function(){
osmallpic.src="img/1373337078811.jpg";
obigpic.src="img/1373337078811.jpg";
}
opics[3].onclick=function(){
osmallpic.src="img/20131227141118_VPjfy.jpeg";
obigpic.src="img/20131227141118_VPjfy.jpeg";
}
opics[4].onclick=function(){
osmallpic.src="img/20151015011741324.png";
obigpic.src="img/20151015011741324.png";
}
};
动态改变图片路径总感觉还能简化，还有一点，选中图片样式改变可以优化，在JS动态获取CSS属性有点绕，
弄了有点久。哎~~。
