js原生之淘宝放大镜特效

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js原生之淘宝放大镜特效相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
#maglifier{
width:1030px;
height:520px;
border:1px solid red;
box-sizing:border-box;
}

.sdiv{
position:absolute;
top:10px;
left:10px;
width:500px;
height:500px;
overflow: hidden;
}
.sdiv img{
position: absolute;
top:0;
left:0;
display: block;
width:100%;
}
.sdiv span{
position: absolute;
top:0;
left:0;
width:250px;
height:250px;
background-color: yellow;
opacity:0.5;
filter: alpha(opacity=50);
display:none;
cursor:crosshair;
}
.bDiv{
position: absolute;
top:10px;
left:520px;
width:500px;
height:500px;
overflow: hidden;
border:1px solid red;
}
.bDiv img{
position: absolute;
top:0;
left:0;
width:200%;
height:200%;
display: block;
}
</style>
<!-- 为了兼容IE8 -->
<!--[if IE 8]>
  <script type="text/javascript">
    if(!document.getElementsByClassName){
      document.getElementsByClassName = function(className, element){
        var children = (element || document).getElementsByTagName(‘*‘);
        var elements = new Array();
        for (var i=0; i<children.length; i++){
          var child = children[i];
          var classNames = child.className.split(‘ ‘);
          for (var j=0; j<classNames.length; j++){
            if (classNames[j] == className){
              elements.push(child);
              break;
            }
          }
        }
        return elements;
      };
    }
  </script>
<![endif]-->
</head>

<body>
<div id="maglifier">
<div class="sdiv">
<img src="image/20170411123451.jpg" alt=‘小图片‘>
<span class="moveSpan"></span>
</div>
</div>

<script type="text/javascript">
var oMaglifier = document.getElementById("maglifier");
var oSDiv = document.getElementsByClassName("sdiv")[0];
var oMoveSpan = document.getElementsByClassName("moveSpan")[0];

// 创建放大的图片元素
var oBDiv = document.createElement("div"),
oBImg = document.createElement("img");
oBDiv.className = "bDiv";
oBImg.src = "image/20170411123430.jpg";
oBImg.alt = "大图片";
oBImg.className = "bImg";

oSDiv.onmouseover = function (){
oBDiv.appendChild(oBImg);
oMoveSpan.style.display = "block";
oMaglifier.appendChild(oBDiv);
};

oSDiv.onmouseout = function (){
oMoveSpan.style.display = "none";
oMaglifier.removeChild(oBDiv);
};

oSDiv.onmousemove = function (e){
var e = e || window.event;

var oMoveSpan_MaxL = oSDiv.offsetWidth - oMoveSpan.offsetWidth; //获取移动框的水平临界值
var oMoveSpan_MaxH = oSDiv.offsetHeight - oMoveSpan.offsetHeight;//获取移动框的垂直临界值

var oBImg_MaxL = -(oBImg.offsetWidth - oBDiv.offsetWidth); //获取移动大图片的临界值
var oBImg_MaxH = -(oBImg.offsetHeight - oBDiv.offsetHeight);//获取移动大图片的临界值


var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//因为ie是没有pageX的,而clientX又表示可视区域,当页面缩小时会有bug,这里重写pageX
//x,y分别表示新的pageX,pageY

var oMoveSpan_L = x - this.offsetLeft - oMoveSpan.offsetWidth/2;
var oMoveSpan_H = y - this.offsetTop - oMoveSpan.offsetHeight/2;
//移动框距离固定框1的left,top值

var oBImg_L = oMoveSpan_L/oMoveSpan_MaxL*oBImg_MaxL;
var oBImg_H = oMoveSpan_H/oMoveSpan_MaxH*oBImg_MaxH;
//大图片距离固定框2的left,top值

if(oMoveSpan_L < 0){oMoveSpan_L = 0;}
if(oMoveSpan_L > oMoveSpan_MaxL){oMoveSpan_L = oMoveSpan_MaxL;}
if(oMoveSpan_H < 0){oMoveSpan_H = 0;}
if(oMoveSpan_H > oMoveSpan_MaxH){oMoveSpan_H = oMoveSpan_MaxH;}
if(oBImg_L > 0){oBImg_L = 0;}
if(oBImg_L < oBImg_MaxL){oBImg_L = oBImg_MaxL;}
if(oBImg_H > 0){oBImg_H = 0;}
if(oBImg_H < oBImg_MaxH){oBImg_H = oBImg_MaxH;}
//到达临界值时,让它不再移动

oMoveSpan.style.left = oMoveSpan_L + "px";
oMoveSpan.style.top = oMoveSpan_H + "px";
oBImg.style.left = oBImg_L + "px";
oBImg.style.top = oBImg_H + "px";


};
</script>

</body>

</html>



















































































































































以上是关于js原生之淘宝放大镜特效的主要内容,如果未能解决你的问题,请参考以下文章

原生js淘宝放大镜效果(第二版)

新手学js的效果图1---( 淘宝等商城货物查看特效)

JS之京东淘宝图片放大镜效果

JS 放大镜特效

JQ实战天猫淘宝放大镜

js放大镜特效