Magnifying glass effect implemented by native js-JS Tutorial-php.cn

Magnifying glass effect implemented by native js
高洛峰
Release： 2016-10-15 09:32:50
Original
1147 people have browsed it
这是我用原生js写的放大镜效果，与各种各样的框架技术相比，我喜欢使用原生的js，在这里，想和大家一起谈谈原生和框架技术的理解与个人喜好。
<!DOCTYPE HTML>
<html>
<head>
<title>js放大镜效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<style>
*{
margin:0px;
padding:0px;
border:none;
list-style:none;
}
#box{
margin:80px auto;
width: 352px;
}
#box p
{
width: 350px;
height: 350px;
border: 1px solid #ddd;
margin-bottom: 5px; 
}
#box p img
{
width:350px;
height:350px;
}
#box h1
{
width: 352px;
height: 54px;
overflow:hidden; 
position:relative;
}
#box h1 div
{
width:310px;
height: 54px;
margin:0px auto;
position:relative;
}
#box h1 div ul
{
position:absolute;
left: 0px;
top: 0px;
}
#box h1 ul li
{
width: 62px; 
float: left;
}
#box h1 ul li img
{
width: 50px;
height: 50px;
padding: 1px;
border: 1px solid #CECFCE;
}
#box h1 img.hoveredThumb{
border: 2px solid #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: 1px solid #faa;
top: 0px;
left: 352px;	
overflow: hidden;
display: none;
}
#largeImg{
display: none;
position: absolute;
}
</style>	
</head>
<body >
<div id="box">
<p id="medImgBox">
<img  id="mediumImg" src="images/product-s1-m.jpg" / alt="Magnifying glass effect implemented by native js" >
<span id="jing"></span>
<span id="mian"></span>
<span id="largeImgBox">
<img  id="largeImg"/ alt="Magnifying glass effect implemented by native js" >
</span>
</p>
<h1>
<div>
<ul id="list">
<li><img  src="images\product-s1.jpg" / alt="Magnifying glass effect implemented by native js" ></li>
<li><img  src="images\product-s2.jpg" / alt="Magnifying glass effect implemented by native js" ></li>
<li><img  src="images\product-s3.jpg" / alt="Magnifying glass effect implemented by native js" ></li>
<li><img  src="images\product-s4.jpg" / alt="Magnifying glass effect implemented by native js" ></li>
<li><img  src="images\product-s1.jpg" / alt="Magnifying glass effect implemented by native js" ></li>
</ul>
</div>
</h1>
</div>

<script>
var imgList = document.querySelectorAll(&#39;#box ul li img&#39;);
for(var i=0; i<imgList.length; i++){
var img = imgList[i];
img.onmouseover = changeThumbImg;
}
function changeThumbImg(){
var previousHovered = document.querySelector(&#39;.hoveredThumb&#39;);
if(previousHovered==null){
this.className = &#39;hoveredThumb&#39;; 
changeMediumImg(this.src);	//修改中等图片的src
}else if(previousHovered!=this){
previousHovered.removeAttribute(&#39;class&#39;);
this.className = &#39;hoveredThumb&#39;;
changeMediumImg(this.src);	//修改中等图片的src
}
}
function changeMediumImg(thumbSrc){
var dotIndex = thumbSrc.lastIndexOf(&#39;.&#39;);
var prefix = thumbSrc.substring(0, dotIndex);
var suffix = thumbSrc.substring(dotIndex);
var mediumSrc = prefix + &#39;-m&#39;+suffix;
document.getElementById(&#39;mediumImg&#39;).src = mediumSrc;
}
/**
为放大镜jing添加鼠标移动事件
**/
document.querySelector(&#39;#mian&#39;).onmousemove = 
function(event){
var x = event.offsetX;	//事件相对于事件源的偏移量
var y = event.offsetY;	
var jing = document.getElementById(&#39;jing&#39;);	
var w = jing.offsetWidth; //jing的宽和高
var h = jing.offsetHeight;
var left = x<w/2 ? 0 : (x-w/2);
var top = 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+&#39;px&#39;;
jing.style.top = top+&#39;px&#39;;
//修改大图的位置/
var largeImg = document.getElementById(&#39;largeImg&#39;);
largeImg.style.left = (-left*largeImg.width/350) + &#39;px&#39;;
largeImg.style.top = (-top*largeImg.height/350)+&#39;px&#39;;
}
document.querySelector(&#39;#mian&#39;).onmouseover = function(){
//显示jing
var jing = document.getElementById(&#39;jing&#39;);
jing.style.display = &#39;block&#39;;
var largeImgBox = document.getElementById(&#39;largeImgBox&#39;);
largeImgBox.style.display = &#39;block&#39;;
//获取当前要显示的大图的src
var src = document.querySelector(&#39;#mediumImg&#39;).src;
var dotIndex = src.lastIndexOf(&#39;.&#39;);
var prefix = src.substring(0, dotIndex-2);
var suffix = src.substring(dotIndex);
src = prefix + &#39;-l&#39;+ suffix;
var largeImg = document.getElementById(&#39;largeImg&#39;);
largeImg.src = src;
largeImg.style.display=&#39;block&#39;;
}
document.querySelector(&#39;#mian&#39;).onmouseout = 
function(){
//除去jing
var jing = document.getElementById(&#39;jing&#39;);
jing.style.display = &#39;none&#39;;
//除去大图显示区
document.getElementById(&#39;largeImgBox&#39;).style.display = &#39;none&#39;;
}
</script>
</body>
</html>
Copy after login