模拟电商商品放大镜

原创 2018年04月17日 21:46:46

html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>哈哈</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 350px;
      height: 350px;
      margin: 100px;
      border: 1px solid #ccc;
      position: relative;
    }

    .big {
      width: 400px;
      height: 400px;
      position: absolute;
      top: 0;
      left: 360px;
      border: 1px solid #ccc;
      overflow: hidden;
      display: none;
    }

    .mask {
      width: 175px;
      height: 175px;
      background: rgba(255, 255, 0, 0.4);
      position: absolute;
      top: 0px;
      left: 0px;
      cursor: move;
      display: none;
    }

    .small {
      position: relative;
    }
  </style>
</head>
<body>
<div class="box" id="box">
  <div class="small"><!--小层-->
    <img src="images/small.png" width="350" alt=""/>
    <div class="mask"></div><!--遮挡层-->
  </div><!--小图-->
  <div class="big"><!--大层-->
    <img src="images/big.jpg" width="800" alt=""/><!--大图-->
  </div><!--大图-->
</div>
<!--导入外部的js文件-->
<script src="common.js"></script>
<script>

  //获取需要的元素
  var box = my$("box");
  //获取小图的div
  var small = box.children[0];
  //遮挡层
  var mask = small.children[1];
  //获取大图的div
  var big = box.children[1];
  //获取大图
  var bigImg = big.children[0];

  //鼠标进入显示遮挡层和大图的div
  box.onmouseover = function () {
    mask.style.display = "block";
    big.style.display = "block";
  };
  //鼠标离开隐藏遮挡层和大图的div
  box.onmouseout = function () {
    mask.style.display = "none";
    big.style.display = "none";
  };

  //鼠标的移动事件---鼠标是在小层上移动
  small.onmousemove = function (e) {
    //鼠标此时的可视区域的横坐标和纵坐标
    //主要是设置鼠标在遮挡层的中间显示
    var x = e.clientX - mask.offsetWidth / 2;
    var y = e.clientY - mask.offsetHeight / 2;
    //主要是margin的100px的问题
    x = x - 100;
    y = y - 100;
    //横坐标的最小值
    x = x < 0 ? 0 : x;
    //纵坐标的最小值
    y = y < 0 ? 0 : y;
    //横坐标的最大值
    x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
    //纵坐标的最大值
    y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;
    //为遮挡层的left和top赋值
    mask.style.left = x + "px";
    mask.style.top = y + "px";

    //遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
    //大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离

    //大图的横向的最大移动距离
    var maxX = bigImg.offsetWidth - big.offsetWidth;

    //大图的纵向的最大移动距离
    //var maxY = bigImg.offsetHeight - big.offsetHeight;

    //大图的横向移动的坐标
    var bigImgMoveX = x * maxX / (small.offsetWidth - mask.offsetWidth);
    //大图的纵向移动的坐标
    var bigImgMoveY = y * maxX / (small.offsetWidth - mask.offsetWidth);

    //设置图片移动
    bigImg.style.marginLeft = -bigImgMoveX + "px";
    bigImg.style.marginTop = -bigImgMoveY + "px";

  };
</script>


</body>
</html>

js

/*
 * 该函数是返回的是指定格式的日期,是字符串类型
 * 参数:date ----日期
 * 返回值: 字符串类型的日期
 * */
function getDatetoString(date) {
    var strDate;//存储日期的字符串
    //获取年
    var year=date.getFullYear();
    //获取月
    var month=date.getMonth()+1;
    //获取日
    var day=date.getDate();
    //获取小时
    var hour=date.getHours();
    //获取分钟
    var minute=date.getMinutes()
    //获取秒
    var second=date.getSeconds();
    hour=hour<10?"0"+hour:hour;
    minute=minute<10?"0"+minute:minute;
    second=second<10?"0"+second:second;
    //拼接
    strDate=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;//隐藏问题,关于变量声明的位置
    return strDate;
}

//根据id获取元素对象
function my$(id) {
    return document.getElementById(id);
}


/*
 *
 * innerText属性IE中支持
 * textContent火狐中支持
 * dvObj.innerText="您好";设置innerText的值
 * console.log(dvObj.innerText);获取innerText的值
 * 因为上述原因,inerText有时候需要设置值,有时候需要获取值
 * 所以,需要写一个兼容的代码能在火狐中使用,也可以在IE中使用
 *
 *
 * */

/*
 *设置innerText属性的值
 * element-----为某个元素设置属性值
 * content-----设置的值
 * */
function setInnerText(element,content) {
    if(typeof element.textContent==="undefined"){
        //IE浏览器
        element.innerText=content;
    }else{
        element.textContent=content;
    }
}
/*
 * 获取innerText属性的值
 * element 要获取的元素
 * 返回的是该元素的innerText值
 * */
function getInnerText(element) {
    if(typeof element.textContent==="undefined"){
        //IE浏览器
        return element.innerText;
    }else{
        return element.textContent;
    }
}


//获取当前元素前一个元素
function getPreviousElement(element) {
    if(element.previousElementSibling){
        return element.previousElementSibling;
    }else{
        var ele=element.previousSibling;
        while (ele&&ele.nodeType!==1){
            ele=ele.previousSibling;
        }
        return ele;
    }
}
//获取当前元素的后一个元素
function getNextElement(element) {
    if(element.nextElementSibling){
        return element.nextElementSibling;
    }else{
        var ele=element.nextSibling;
        while(ele&&ele.nodeType!==1){
            ele=ele.nextSibling;
        }
        return ele;
    }
}

//获取父元素中的第一个元素
function getFirstElementByParent(parent) {
    if(parent.firstElementChild){
        return parent.firstElementChild;
    }else{
        var ele=parent.firstChild;
        while (ele&&ele.nodeType!==1){
            ele=ele.nextSibling;
        }
        return ele;
    }
}
//获取父元素中的最后一个元素
function getLastElementByParent(parent) {
    if(parent.lastElementChild){
        return parent.lastElementChild;
    }else{
        var ele=parent.lastChild;
        while(ele&&ele.nodeType!==1){
            ele=ele.previousSibling;
        }
        return ele;
    }
}

//获取兄弟元素
function getsiblings(ele) {
    if(!ele)return;//判断当前的ele这个元素是否存在
    var elements=[];//定义数组的目的就是存储当前这个元素的所有的兄弟元素
    var el=ele.previousSibling;//当前元素的前一个节点
    while (el){
        if (el.nodeType===1){//元素
            elements.push(el);//加到数组中
        }
        el=el.previousSibling;
    }
    el=ele.nextSibling;
    while(el){
        if(el.nodeType===1){
            elements.push(el);
        }
        el=el.nextSibling;
    }
    return elements;
}
//    //能力检测多个浏览器为同一个对象注册多个事件
var EventTools= {
    //为对象添加注册事件
    addEventListener: function (element, eventName, listener) {
        if (element.addEventListener) {
            element.addEventListener(eventName, listener, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + eventName, listener)
        } else {
            element["on" + eventName] = listener;
        }
    },
    //为对象移除事件
    removeEventListener: function (element, eventName, listener) {
        if (element.removeEventListener) {
            element.removeEventListener(eventName, listener, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + eventName, listener);
        } else {
            element["on" + eventName] = null;
        }
    },
    //获取参数e
    getEvent: function (e) {
        return e || window.event;
    },
    getPageX: function (e) {
        if (e.pageX) {
            return e.pageX;
        } else {
            //有的浏览器把高度设计在了文档的第一个元素中了
            //有的浏览器把高度设计在了body中了
            //document.documentElement.scrollTop;//文档的第一个元素
            //document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            return e.clientX + scrollLeft;
        }
    },
    getPageY: function (e) {
        if (e.pageY) {
            return e.pageY;
        } else {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            return e.clientY + scrollTop;
        }
    }

};

效果图


js实现淘宝放大镜效果

记得很久以前,小编就准备写个放大镜,但是种种原因导致,一直没有完成这个愿望,下面,让我们一起来实现这个常见的功能吧。 不懂的同学,可能认为这很难细实现,觉得它很博大精深的样子,其实真了解他了,...
  • YZi_Angel
  • YZi_Angel
  • 2016-08-25 21:42:57
  • 6011

仿京东产品轮播带放大镜效果

  • 2016年03月19日 11:40
  • 421KB
  • 下载

ecshop 商品详情页商品放大镜功能

作用:放大图片。 步骤如下:第一步:加载js文件。在goods.dwt文件head部分加载:第二步:修改goods.dwt模板。查找imginfo部分。将原有图片显示内容替换成如下:        ...
  • u010242979
  • u010242979
  • 2013-12-04 14:29:39
  • 2020

仿电商放大镜

在做仿电商的放大镜效果之前,需要我们对JS事件对象有所了解。任何的事件处理函数,调用时都默认传入一个实参,就是事件对象,通常用event形参去接收。比如:点击按钮,移动鼠标... 所有的事件细节都封装...
  • qq_36056828
  • qq_36056828
  • 2018-04-05 23:00:01
  • 59

电子商务网站的放大镜怎么做_____放大镜_单倍放大镜(更好了解思路)

思路和示意图: 效果图: 代码: 很核心的一句话:大图的移动和放大镜的移动方向是相反的 *{ margin:0;  padding:...
  • jiang7701037
  • jiang7701037
  • 2017-12-28 13:15:09
  • 65

Jquery插件开发之图片放大镜效果(仿淘宝)

Jquery插件开发之图片放大镜效果(仿淘宝)  需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大!  思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一...
  • forest_fire
  • forest_fire
  • 2016-03-21 11:13:36
  • 2332

Vue实现 商品信息轮播+放大镜效果

  • 2017年07月21日 14:53
  • 7KB
  • 下载

jqzoom实现京东商品详细页产品图片放大镜效果

  • 2015年04月14日 15:40
  • 406KB
  • 下载

HTML CSS写商品详情放大镜效果

先上效果图: *{margin: 0px;padding: 0px;} #smal...
  • zhangli2513
  • zhangli2513
  • 2017-09-02 11:21:29
  • 211

商品详情的图片放大效果

刚做好的一个放大镜效果。实际上是利用了两张图片,隐藏一张稍大的图片,然后根据鼠标移动到相应位置显示出来...
  • qq_26739383
  • qq_26739383
  • 2016-09-19 15:44:24
  • 704
收藏助手
不良信息举报
您举报文章:模拟电商商品放大镜
举报原因:
原因补充:

(最多只允许输入30个字)