首页 > 代码库 > 图片放大镜(像淘宝浏览商品一样)JS操作
图片放大镜(像淘宝浏览商品一样)JS操作
×
目录
[1]布局 [2]JS操作-获得元素 [3]大图及面板 [4]面板随着鼠标移动 [5]控制面板移动范围 [6]大图动起来 [7]代码-------------------------------------
一,布局
一个大的div,包括下面:
左边是小图div,小图中有可移动的面板.右边是大图div,
学到的内容:fiter 滤镜 这里; overflow 这里
offsetLeft(HTML DOM 元素对象) 这里
<style type="text/css"> #div1{ width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; } #div1 .small_pic{ width: 200px; height: 200px; background: #eee; position: relative; } #div1 .float_layer{ width: 50px; height: 50px; border:1px solid #000; background: #fff; filter: alpha(opacity:30); //滤镜 opacity: 0.3; position: absolute; top: 0px; left: 0px; display: none; } #div1 .mark{ width: 100%; height:100%; position: absolute; z-index: 2; left: 0px; top: 0px; background: red; filter: alpha(opacity:0); opacity: 0; } #div1 .big_pic{ position: absolute; top: -1px; left: 215px; width: 250px; height: 250px; overflow: hidden; border: 2px solid #ccc; display: none; } #div1 .big_pic img{ position: absolute; top: 0px; left: 0px; }</style><body> <div id="div1"> <div class="small_pic"> <span class="mark"></span> <span class="float_layer"></span> <img src=http://www.mamicode.com/"images/small.png" alt="放大图片1"> </div> <div class="big_pic"> <img src=http://www.mamicode.com/"images/big.png" alt="放大图片2"> </div> </div></body>
-------------------------------------
二,JS操作-获得元素
写获得class函数
function getByClass(oParent, sClass){ var aEle=oParent.getElementsByTagName(‘*‘); var aTmp=[]; var i=0; for(i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aTmp.push(aEle[i]); } } return aTmp;}
-------------------------------------
三,控制大图及面板的出现和隐藏.
mouseover mouseout
oMark.onmouseover=function() { oFloat.style.display=‘block‘; oBig.style.display=‘block‘; }; oMark.onmouseout=function(){ oFloat.style.display=‘none‘; oBig.style.display=‘none‘; };
-------------------------------------
四,让面板随着鼠标移动
mousemove
鼠标位置
下面是确定面板的left
var oEvent=ev||event; var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2; var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;oFloat.style.left=l+‘px‘;oFloat.style.top=t+‘px‘;
-------------------------------------
五,控制面板的可移动范围
判断 超出时强制为某值
if(l<-5) { l=-5; } else if (l>oMark.offsetWidth-oFloat.offsetWidth+5){l=oMark.offsetWidth-oFloat.offsetWidth+5;}//参考面板left的确定 这里 if(t<-5) { t=-5; }
-------------------------------------
六,大图动起来
按照一个比例
面板在小图里可以移动范围除以小图的宽度,
var tempX=l/(oMark.offsetWidth-oFloat.offsetWidth); var tempY=t/(oMark.offsetHeight-oFloat.offsetHeight); document.title=tempX; oImg.style.left=-tempX*(oImg.offsetWidth-oBig.offsetWidth)+‘px‘; oImg.style.top=-tempY*(oImg.offsetHeight-oBig.offsetHeight)+‘px‘;
<iframe style="width: 100%; height: 300px;" src="http://sandbox.runjs.cn/show/xhhv5igb" width="320" height="240"></iframe>
-------------------------------------
七,代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜效果</title><style type="text/css"> #div1{ width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; } #div1 .small_pic{ width: 200px; height: 200px; background: #eee; position: relative; } #div1 .float_layer{ width: 50px; height: 50px; border:1px solid #000; background: #fff; filter: alpha(opacity:30); opacity: 0.3; position: absolute; top: 0px; left: 0px; display: none; } #div1 .mark{ width: 100%; height:100%; position: absolute; z-index: 2; left: 0px; top: 0px; background: red; filter: alpha(opacity:0); opacity: 0; } #div1 .big_pic{ position: absolute; top: -1px; left: 215px; width: 250px; height: 250px; overflow: hidden; border: 2px solid #ccc; display: none; } #div1 .big_pic img{ position: absolute; top: 0px; left: 0px; }</style><script type="text/javascript">function getByClass(oParent, sClass){ var aEle=oParent.getElementsByTagName(‘*‘); var aTmp=[]; var i=0; for(i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aTmp.push(aEle[i]); } } return aTmp;}window.onload=function (){ var oDiv=document.getElementById(‘div1‘); var oMark=getByClass(oDiv, ‘mark‘)[0]; var oFloat=getByClass(oDiv,‘float_layer‘)[0]; var oBig=getByClass(oDiv,‘big_pic‘)[0]; var oSmall=getByClass(oDiv,‘small_pic‘)[0]; var oImg=oBig.getElementsByTagName(‘img‘)[0]; oMark.onmouseover=function() { oFloat.style.display=‘block‘; oBig.style.display=‘block‘; }; oMark.onmouseout=function(){ oFloat.style.display=‘none‘; oBig.style.display=‘none‘; }; oMark.onmousemove=function(ev){ var oEvent=ev||event; var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2; var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2; if(l<-5) { l=-5; } else if (l>oMark.offsetWidth-oFloat.offsetWidth+5){l=oMark.offsetWidth-oFloat.offsetWidth+5;} if(t<-5) { t=-5; } else if (t>oMark.offsetHeight-oFloat.offsetHeight+5){t=oMark.offsetHeight-oFloat.offsetHeight+5;} oFloat.style.left=l+‘px‘; oFloat.style.top=t+‘px‘; var tempX=l/(oMark.offsetWidth-oFloat.offsetWidth); var tempY=t/(oMark.offsetHeight-oFloat.offsetHeight); document.title=tempX; oImg.style.left=-tempX*(oImg.offsetWidth-oBig.offsetWidth)+‘px‘; oImg.style.top=-tempY*(oImg.offsetHeight-oBig.offsetHeight)+‘px‘; } };</script></head><body> <div id="div1"> <div class="small_pic"> <span class="mark"></span> <span class="float_layer"></span> <img src="http://www.mamicode.com/images/small.png" alt="放大图片1"> </div> <div class="big_pic"> <img src="http://www.mamicode.com/images/big.png" alt="放大图片2"> </div> </div></body></html>
图片放大镜(像淘宝浏览商品一样)JS操作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。