前天逛淘宝,看见淘宝的商品图片,鼠标放上去就会就会有相应大图的预览,于是就想着自己能不能做一个这样的效果出来,毕竟以前也看过这样类似的教程。
思路:
一:页面布局
二:鼠标放上去,出现透明浮动块
三:鼠标在目标元素上移动时,出现预览图。
四:鼠标离开目标元素时,浮动块和大图预览消失。
下面咱们一步一步来解决
First:布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> #div_1{ width:110px; height:124px; position:relative; } .div_1_small{ position:relative; outline-offset:2px; outline: 1px solid black; } .img_small{ width:110px; } .mark{ width:100%; height:100%; position:absolute; opacity:0; } .float_layer{ width:20px; height:20px; left:0px; top:0px; border:1px solid black; background-color:rgba(255, 255, 255, 0.3); position:absolute; display:none; } .div_1_big{ width:150px; height:170px; left:115px; top:2px; background:red; overflow:hidden; position:absolute; display: none; } .div_1_big img{ position:absolute; width:350px; }
Second 浮动块</style> <body> <div id="div_1"> <div class="div_1_small">//小图 <span class="float_layer"></span>//浮动块 <span class="mark"></span>//模拟目标元素 <img src="images/1.jpg" class='img_small' alt="small"> </div> <div class="div_1_big">//大图 <img src="images/1.jpg" class="img_big" alt="normal"> </div> </div> </body> <script src='js/magnifyingGlass.js'></script> </html>
鼠标放上去出现浮动块,首先想到的就是onmouseover,。 事件动作由原来的CSS属性display='none'变为display = 'block';
Third移动和预览图
移动
浮动块要随鼠标移动,那么首先浮动块得是绝对定位,然后随着鼠标的移动,浮动块的top值和left值会改变,并将鼠标定位到浮动块的中间位置,有如下代码
event.clientX - div.offsetLeft - small_img.offsetLeft - float_layer .offsetWidth/2+'px'
//鼠标坐标位置减去所有小图的右边offsetLeft值,再减去浮动块的宽度的二分之一,这样鼠标就会出现浮动块的中间,高度同理 event.clientY - div.offsetTop - small_img.offsetTop - float_layer.offsetHeight/2 +'px'
大图预览
①大图CSS属性变为display = 'block',position=‘absolute’。
②计算大图的显示比例,计算出 比率=浮动块位置/(模拟块宽度 - 浮动块宽度);然后用 比率*(大图的宽度 - 可视区的宽度)【不见去可视区的宽度的话会出现浮动块移到最右边时,可视区出现白块的问题】
Fourth 效果消失
用到onmouseout,浮动快和大图的display = 'none';
下面贴出JS的代码
这样就能出现想要的效果了。//获取类元素数组 function getByClass(oMark,sClass){ var sTagName = oMark.getElementsByTagName('*'); var arr = []; for(var i = 0;i < sTagName.length;i++){ if(sClass==sTagName[i].className){ arr.push(sTagName[i]); } } return arr; } //事件处理程序 var EventUtil = { addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ element.attachEvent('on'+type,handler); } else{ element['on'+type] = handler; } } } window.onload = function(){ var div_1 = document.getElementById('div_1'); oFloat_layer = getByClass(div_1,'float_layer')[0], oDiv_1_small = getByClass(div_1,'div_1_small')[0], oDiv_1_big = getByClass(div_1,'div_1_big')[0], oMark = getByClass(div_1,'mark')[0]; oImg_big = getByClass(div_1,'img_big')[0]; //获取各个元素引用 function mouseOver(){ oFloat_layer.style.display = 'block'; oDiv_1_big.style.display = 'block' } function mouseOut(){ oFloat_layer.style.display = 'none'; oDiv_1_big.style.display = 'none' ; } function mouseMove(ev){ var oEv = ev||event; var l = oEv.clientX - div_1.offsetLeft - oDiv_1_small.offsetLeft - oFloat_layer.offsetWidth/2; var t = oEv.clientY - div_1.offsetTop - oDiv_1_small.offsetTop - oFloat_layer.offsetHeight/2; //l t 一是让鼠标能始终在浮动小框的中间;二初步定位小浮动框的位置 if(l<0) { l = 0; } else if(l>oMark.offsetWidth-oFloat_layer.offsetWidth){ l = oMark.offsetWidth-oFloat_layer.offsetWidth; } if(t<0){ t = 0; } else if(t > oMark.offsetHeight - oFloat_layer.offsetHeight){ t = oMark.offsetHeight - oFloat_layer.offsetHeight; } oFloat_layer.style.left = l + 'px'; oFloat_layer.style.top = t + 'px'; //以下是算出来大图片的移动的位置 var percentX = l/(oMark.offsetWidth-oFloat_layer.offsetWidth); var percentY = t/(oMark.offsetHeight-oFloat_layer.offsetHeight); oImg_big.style.left = -percentX*(oImg_big.offsetWidth - oDiv_1_big.offsetWidth) + 'px'; oImg_big.style.top = -percentY*(oImg_big.offsetHeight - oDiv_1_big.offsetHeight) + 'px'; } EventUtil.addHandler(oMark,'mouseover',mouseOver); EventUtil.addHandler(oMark,'mouseout',mouseOut); EventUtil.addHandler(oMark,'mousemove',mouseMove); }
如有该文有不对和不合理的地方,欢迎指正出来,大家一同交流,共同进步,谢谢大家的阅读。