js仿淘宝商品放大预览功能

更新时间：2017年03月15日 09:50:15 作者：shangpudxd

本文主要介绍了js仿淘宝商品放大预览功能的实例。具有很好的参考价值。下面跟着小编一起来看下吧

将鼠标移动至图片区域可放大预览

效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{padding:0; margin:0;}
    #img1{width:300px; height:200px;}
    #sp1{width:60px; height:40px; position: absolute; left:0; top:0; background: rgba(62, 55, 58, 0.4)
    }
    #img2{width:2250px; height:1500px; position: absolute;}
    div{width:450px; height:300px; position: absolute; left:310px; top:0; overflow: hidden; border:2px solid black; display: none;}
  </style>
  <script>
    window.onload=function(){
      var img1 = document.getElementById('img1');
      var img2 = document.getElementById('img2');
      var sp = document.getElementById('sp1');
      var oBox = document.getElementById('box');
      sp.onmouseover=function(){
        oBox.style.display='block';
      };
      sp.onmouseout=function(){
        oBox.style.display='none';
      };
      document.onmousemove=function(ev){
        var x = (ev.clientX || event.clientX)-sp.offsetWidth/2;
        var y = (ev.clientY || event.clientY)-sp.offsetHeight/2;
        if((ev.clientX || event.clientX)<sp.offsetWidth/2){
          x = 0;
        }
        if((ev.clientX || event.clientX)>img1.offsetWidth-sp.offsetWidth/2){
          x = img1.offsetWidth-sp.offsetWidth;
        }
        if((ev.clientY || event.clientY)<sp.offsetHeight/2){
          y = 0;
        }if((ev.clientY || event.clientY)>img1.offsetHeight-sp.offsetHeight/2){
          y = img1.offsetHeight-sp.offsetHeight;
        }
        if((ev.clientX || event.clientX)<300 && (ev.clientY || event.clientY)<200) {
          sp.style.left = x + 'px';
          sp.style.top = y + 'px';
          img2.style.left = -x * (img2.offsetWidth / img1.offsetWidth) + 'px';
          img2.style.top = -y * (img2.offsetHeight / img1.offsetHeight) + 'px';
        }
      }
    }
  </script>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489083204637&di=244fe324db033fc826de48e90d2373f0&imgtype=0&src=http%3A%2F%2Fpic2015.5442.com%2F2016%2F0328%2F025%2F5.jpg%2521960.jpg
" alt="" id="img1">
<span id="sp1"></span>
<div id="box">
  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489083204637&di=244fe324db033fc826de48e90d2373f0&imgtype=0&src=http%3A%2F%2Fpic2015.5442.com%2F2016%2F0328%2F025%2F5.jpg%2521960.jpg
" alt="" id="img2">
</div>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

javascript解析json实例详解
这篇文章主要介绍了javascript解析json的方法,以实例形式详细讲述了javascript的json库用法,需要的朋友可以参考下
2014-11-11
解决npm安装Electron缓慢网络超时导致失败的问题
下面小编就为大家分享一篇解决npm安装Electron缓慢网络超时导致失败的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
uniapp实现地图点聚合功能的详细教程
最近公司项目需求需要对设备在地图上面进行监控,并在当设备一定距离时进行聚合,这篇文章主要给大家介绍了关于uniapp实现地图点聚合功能的相关资料,需要的朋友可以参考下
2022-12-12
javascript事件冒泡详解和捕获、阻止方法
虽然精通jquery，但对它的原型javascript却不是很了解，最近在学习javascript中遇到了一些困难，比如冒泡和捕获，很多次被提到，但又不知究竟应用在何处。找到了一些好文章解惑，在这里分享给大家
2014-04-04
url 编码 js url传参中文乱码解决方案
前后台用js传参过程中，如果是中文就容易出现乱码，所以最好是先编码。
2010-04-04
js 控制下拉菜单刷新的方法
js 控制下拉菜单刷新的方法，需要的朋友可以参考一下
2013-03-03
使用documentElement正确取得当前可见区域的大小
如何取得当前浏览器里面可见区域的大小？其他方法都不适用，只有documentElement才可以,需要的朋友可以参考下
2014-07-07
nodejs win7下安装方法
什么是Node.js?还服务器端javascript?对于这个概念我在这篇文章不做解释，可以自己去搜索了解下，服务器端js不是新技术，只是最近的node.js的火爆让他爆发了，我会在以后的文章里解释什么是node.js
2012-05-05
js实现带搜索功能的下拉框
这篇文章主要为大家详细介绍了js实现到搜索的下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
详解ES6之async+await 同步/异步方案
这篇文章主要介绍了详解ES6之async+await 同步/异步方案，本文以最简明的方式来疏通 async + await，有兴趣的可以了解下
2017-09-09