JavaScript另类图片放大镜的实现代码

发布时间:2020-05-11编辑:脚本学堂
分享一例javascript实现的图片放大镜代码,说是有点另类的放大镜效果,具体有多另类,大家测试下便知,有需要的朋友参考下吧。

本节主要内容:
javascript图片放大镜效果

代码:
 

复制代码 代码示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS另类放大镜--www.jb200.com</title>
<style>
ul,li{margin:0;padding:0;}
ul{list-style:none;}
.w960{
 margin:0 auto;
 width:960px;
 border:1px solid #ccc;
 border-right:none;
}
.pic-list{
 width:960px;
 overflow:hidden;
}
.pic-list .item{
 float:left;
 position:relative;
 margin-left:-1px;
 margin-bottom:-1px;
 width:240px;
 height:320px;
 border-right:1px solid #ccc;
 border-bottom:1px solid #ccc;
 overflow:hidden;
}
.pic-list .item img{
 position:absolute;
 cursor:pointer;
}
</style>
</head>
<body>
<div class="w960">
 <ul class="pic-list" id="pic-list">
  <li class="item">
         <img src="imgs/img_01.jpg" width="240" height="320">
        </li>
        <li class="item">
         <img src="imgs/img_02.jpg" width="240" height="320">
        </li>
        <li class="item">
         <img src="imgs/img_03.jpg" width="240" height="320">
        </li>
        <li class="item">
         <img src="imgs/img_04.jpg" width="240" height="320">
        </li>
        <li class="item">
         <img src="imgs/img_05.jpg" width="240" height="320">
        </li>
        <li class="item">
         <img src="imgs/img_06.jpg" width="240" height="320">
        </li>
        <li class="item">
         <img src="imgs/img_07.jpg" width="240" height="320">
        </li>
        <li class="item">
         <img src="imgs/img_08.jpg" width="240" height="320">
        </li>
 </ul>
</div>
<script>
(function(){
 var d = document.getElementById("pic-list"),
     c = d.getElementsByTagName("li"),
  l = c.length,
  scale = 2;
 function stopEvent(e){
  if(e && e.stopPropagation){
   e.stopPropagation();   
  }else{
   e.cancelBubble = true;
  }
 }
 for(var i = 0; i < l; i++){
  c[i].left = c[i].getBoundingClientRect().left;
  c[i].top = c[i].getBoundingClientRect().top;
  (function(i){
   c[i].onmouseover = function(e){
    var e = e || window.event;
    var img = this.getElementsByTagName("img")[0];
    img.style.width = img.offsetWidth * scale + "px";
    img.style.height = img.offsetHeight * scale + "px";
    img.style.left = (this.offsetWidth - img.offsetWidth) / 2 + "px";
    img.style.top = (this.offsetHeight - img.offsetHeight) / 2 + "px";
    this.dsx = Math.abs(parseInt(img.style.left));
    this.dsy = Math.abs(parseInt(img.style.top));
    this.cdx = this.offsetWidth / 2;
    this.cdy = this.offsetHeight / 2;
    this.left = (this.offsetWidth - img.offsetWidth) / 2
    this.top = (this.offsetHeight - img.offsetHeight) / 2
    stopEvent(e);
   };
   c[i].onmouseout = function(e){
    var e = e || window.event;
    var img = this.getElementsByTagName("img")[0];
    img.style.width = img.offsetWidth / scale + "px";
    img.style.height = img.offsetHeight / scale + "px";
    img.style.left = Math.floor((this.offsetWidth - img.offsetWidth) / 2) + "px";
    img.style.top = Math.floor((this.offsetHeight - img.offsetHeight) / 2) + "px";
    stopEvent(e);
   };
   c[i].onmousemove = function(e){
    var e = e || window.event;
    var img = this.getElementsByTagName("img")[0];
    var center = {"x":this.getBoundingClientRect().left + this.offsetWidth / 2,"y":this.getBoundingClientRect().top + this.offsetHeight / 2};
    var mPos = {"x":e.clientX,"y":e.clientY};
    var deltax = center.x - mPos.x,deltay = center.y - mPos.y;
    var dleft = deltax / this.cdx * this.dsx;
    var dtop = deltay / this.cdy * this.dsy;
    img.style.left = Math.floor(this.left + dleft) + "px";
    img.style.top = Math.floor(this.top + dtop) + "px";
    stopEvent(e);
   }
  })(i);
 }
})();
</script>
</body>
</html>