微信小程序来啦_js完成图片部分扩大效果详解

日期:2021-01-07 类型:行业动态 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

js实现图片局部放大效果详解       这篇文章主要介绍了js实现图片局部放大效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。

如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分。左边分成一张大图,和一个导航栏,在右边则是一个放大镜放大后的图片。因此,我在画页面的时候,大体的HTMl结构如下:

 body 
 div 
 div 
 img src="images/small1.jpg" id = "small" 
 div /div 
 /div 
 ul id = "listshow" 
 img src="images/small1.jpg" data-img = "images/big1.jpg" alt="" 
 /li 
 img src="images/small2.jpg" data-img = "images/big2.jpg" alt="" 
 /li 
 img src="images/small3.jpg" data-img = "images/big3.jpg" alt="" 
 /li 
 img src="images/small4.jpg" data-img = "images/big4.jpg" alt="" 
 /li 
 /ul 
 /div 
 div 
 img src="images/big1.jpg" id = "big" 
 /div 
 /body 

在这个时候,将静态页面按常规方式进行布局,给予css样式如下:

 style 
 padding: 0;
 margin: 0;
 list-style: none;
 .choose{
 width: 400px;
 height: 600px;
 float: left;
 margin:50px 0 0 50px;
 .content{
 width: 400px;
 height: 400px;
 position: relative;
 .content img {
 width: 400px;
 height: 400px;
 #listshow{
 width: 400px;
 height: 100px;
 margin-top: 20px;
 #listshow li{
 width: 98px;
 height: 100px;
 float: left;
 border:1px solid #666;
 #listshow li img{
 width: 98px;
 height: 100px;
 #listshow .selected{
 border-color: brown;
 .larger{
 width: 400px;
 height: 400px;
 position: absolute;
 top: 50px;
 left: 500px;
 float: left;
 overflow: hidden;
 display: none;
 #big{
 width: 800px;
 height: 800px;
 position: absolute;
 left: 0;
 top: 0;
 .shadow{
 width: 200px;
 height: 200px;
 background-color: rgba(145,200,200,.4);
 position: absolute;
 left: 0;
 top: 0;
 z-index: 10;
 display: none;
 /style 

那么这个时候,开始写js样式,分布书写的话,第一步要考虑到左边的选项卡。选项卡我采用直接使用src赋值的方法,将滑过的图片对应的src给大图,代码呈现:

for(var i = 0;i showli.length;i++){
 var showitem = showli[i];
 showitem.onmouseover =showitem.onclick = function(e){
 let evt = window.event||e;
 for(var j =0;j showli.length;j++){
 showli[j].className = "";
 var showimg = this.getElementsByTagName("img")[0];
 var imgsrc = showimg.src;
 small.src = imgsrc;
 var bigsrc = showimg.getAttribute("data-img");
 big.src = bigsrc;
 this.className = "selected";
 }

这样就可以成功实现选项卡功能,比较简单粗暴的一种方式,当然,大家使用selected结合点击下标和大图下标相等的这一点,也一样可以做出来。

接下来要考虑到,鼠标在大图上移动时,遮罩层的移动效果。值得一提的时候,这个地方其实存在一个视觉上的误区,看起来是在滑动遮罩层,其实是鼠标的滑动,而遮罩层通过获取鼠标的clientX,clientY来确定自己的位置,遮罩层位置获取代码:

content.onmousemove = function (e) {
 var evt = window.event||e;
 larger.style.display = "block";
 shadow.style.display = "block";
 var clientX = evt.clientX;
 var clientY = evt.clientY;
 var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
 var X = clientX+scrollLeft-chooseMarginL-shadowW/2;
 var Y = clientY+scrollTop-chooseMarginT-shadowH/2;
 if(X =0){
 X = 0;
 if(X =maxX){
 X = maxX;
 if(Y =0){
 Y = 0;
 if(Y =maxY){
 Y = maxY;
// 防止遮罩层粘滞,跟随鼠标一起滑出大图位置
 var bigX = X*bigW/contentW;
 var bigY = Y*bigH/contentH;
// bigX / bigW = X / contentW,主图和遮罩层之间存在两倍关系,放大图和原图之间也有两倍关系
 shadow.style.left = X+"px";
 shadow.style.top = Y+"px";
 big.style.left = -bigX+"px";
 big.style.top = -bigY+"px";
 }

在这里,计算较多,尤其要注意遮罩层阴影,主图以及放大图之间的倍数关系。

到这里,基本功能就实现了,这里面涉及的计算可以适当配图理解,尤其注意点击位置的获取。

以上所述是小编给大家介绍的js实现图片局部放大效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!