原生JS实现的放大镜效果实例代码
这是我用原生js写的放大镜效果，与各种各样的框架技术相比，我喜欢使用原生的js，在这里，想和大家一起谈谈原生和框架技术的理解与个人喜好。
<!DOCTYPEHTML>
<html>
<head>
<title>js放大镜效果</title>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<style>
*{
margin:0px;
padding:0px;
border:none;
list-style:none;
}
#box{
margin:80pxauto;
width:352px;
}
#boxp
{
width:350px;
height:350px;
border:1pxsolid#ddd;
margin-bottom:5px;
}
#boxpimg
{
width:350px;
height:350px;
}
#boxh1
{
width:352px;
height:54px;
overflow:hidden;
position:relative;
}
#boxh1div
{
width:310px;
height:54px;
margin:0pxauto;
position:relative;
}
#boxh1divul
{
position:absolute;
left:0px;
top:0px;
}
#boxh1ulli
{
width:62px;
float:left;
}
#boxh1ulliimg
{
width:50px;
height:50px;
padding:1px;
border:1pxsolid#CECFCE;
}
#boxh1img.hoveredThumb{
border:2pxsolid#e4393c;
padding:0;
}
/*中等大小的图片显示区域*/
p#medImgBox{
position:relative;
}
#jing{
position:absolute;
left:0;
top:0;
width:175px;
height:175px;
border-radius:50%;
background:#ffd;
opacity:0.7;
display:none;
}
/*悬于图片/jing上方的专用于接收鼠标移动事件的
一个完全透明的层*/
#medImgBox#mian{
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
cursor:move;
opacity:0;
}
/**
大图显示区域
**/
#largeImgBox{
position:absolute;
width:175px;
height:175px;
border-radius:50%;
border:1pxsolid#faa;
top:0px;
left:352px;
overflow:hidden;
display:none;
}
#largeImg{
display:none;
position:absolute;
}
</style>
</head>
<body>
<divid="box">
<pid="medImgBox">
<imgid="mediumImg"src="images/product-s1-m.jpg"/>
<spanid="jing"></span>
<spanid="mian"></span>
<spanid="largeImgBox">
<imgid="largeImg"/>
</span>
</p>
<h1>
<div>
<ulid="list">
<li><imgsrc="images\product-s1.jpg"/></li>
<li><imgsrc="images\product-s2.jpg"/></li>
<li><imgsrc="images\product-s3.jpg"/></li>
<li><imgsrc="images\product-s4.jpg"/></li>
<li><imgsrc="images\product-s1.jpg"/></li>
</ul>
</div>
</h1>
</div>
<script>
varimgList=document.querySelectorAll('#boxulliimg');
for(vari=0;i<imgList.length;i++){
varimg=imgList[i];
img.onmouseover=changeThumbImg;
}
functionchangeThumbImg(){
varpreviousHovered=document.querySelector('.hoveredThumb');
if(previousHovered==null){
this.className='hoveredThumb';
changeMediumImg(this.src);//修改中等图片的src
}elseif(previousHovered!=this){
previousHovered.removeAttribute('class');
this.className='hoveredThumb';
changeMediumImg(this.src);//修改中等图片的src
}
}
functionchangeMediumImg(thumbSrc){
vardotIndex=thumbSrc.lastIndexOf('.');
varprefix=thumbSrc.substring(0,dotIndex);
varsuffix=thumbSrc.substring(dotIndex);
varmediumSrc=prefix+'-m'+suffix;
document.getElementById('mediumImg').src=mediumSrc;
}
/**
为放大镜jing添加鼠标移动事件
**/
document.querySelector('#mian').onmousemove=
function(event){
varx=event.offsetX;//事件相对于事件源的偏移量
vary=event.offsetY;
varjing=document.getElementById('jing');
varw=jing.offsetWidth;//jing的宽和高
varh=jing.offsetHeight;
varleft=x<w/2?0:(x-w/2);
vartop=y<h/2?0:(y-h/2);
if(x>(w*2-w/2)){
left=w*2-w;
}
if(y>(h*2-h/2)){
top=h*2-h;
}
jing.style.left=left+'px';
jing.style.top=top+'px';
//修改大图的位置/
varlargeImg=document.getElementById('largeImg');
largeImg.style.left=(-left*largeImg.width/350)+'px';
largeImg.style.top=(-top*largeImg.height/350)+'px';
}
document.querySelector('#mian').onmouseover=function(){
//显示jing
varjing=document.getElementById('jing');
jing.style.display='block';
varlargeImgBox=document.getElementById('largeImgBox');
largeImgBox.style.display='block';
//获取当前要显示的大图的src
varsrc=document.querySelector('#mediumImg').src;
vardotIndex=src.lastIndexOf('.');
varprefix=src.substring(0,dotIndex-2);
varsuffix=src.substring(dotIndex);
src=prefix+'-l'+suffix;
varlargeImg=document.getElementById('largeImg');
largeImg.src=src;
largeImg.style.display='block';
}
document.querySelector('#mian').onmouseout=
function(){
//除去jing
varjing=document.getElementById('jing');
jing.style.display='none';
//除去大图显示区
document.getElementById('largeImgBox').style.display='none';
}
</script>
</body>
</html>
以上所述是小编给大家介绍的原生JS实现的放大镜效果实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对毛票票网站的支持！