Heim > Artikel > Web-Frontend > 原生js实现的放大镜效果

原生js实现的放大镜效果

高洛峰Original: 2016-10-15 09:32:501075Durchsuche

这是我用原生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="原生js实现的放大镜效果" >
<span id="jing"></span>
<span id="mian"></span>
<span id="largeImgBox">
<img  id="largeImg"/ alt="原生js实现的放大镜效果" >
</span>
</p>
<h1>
<div>
<ul id="list">
<li><img  src="images\product-s1.jpg" / alt="原生js实现的放大镜效果" ></li>
<li><img  src="images\product-s2.jpg" / alt="原生js实现的放大镜效果" ></li>
<li><img  src="images\product-s3.jpg" / alt="原生js实现的放大镜效果" ></li>
<li><img  src="images\product-s4.jpg" / alt="原生js实现的放大镜效果" ></li>
<li><img  src="images\product-s1.jpg" / alt="原生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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：总结js常用函数和常用技巧Nächster Artikel：Vue.js 跟踪对象新增属性

In Verbindung stehende Artikel

Mehr sehen