前端JS电商放大镜效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>-电商放大镜</title>

    <style type="text/css">

    *{

        padding: ;

        margin: ;

    }

    #left{

      padding: ;

    margin: ;

        width: 400px;

        height: 400px;

        border: 2px solid blue;

        background: url(http://chuantu.biz/t6/17/1503469475x2063891122.jpg) no-repeat;

        float: left;

        cursor: crosshair;

        position: relative;

    box-sizing: border-box;

    }

    #box{

        width: 200px;

        height: 200px;

        background: white;

        opacity: 0.6;

        position: absolute;

        top: ;

        left: ;

        display: none;

    box-sizing: border-box;

    }

    #cover{

        width: 400px;

        height: 400px;

        background: red;

        position: absolute;

        left: ;

        top: ;

        opacity: ;

    box-sizing: border-box;

    }

    #right{

        width: 400px;

        height: 400px;

        border: 2px solid black;

        overflow: hidden;

        position: relative;

        display: none;

    box-sizing: border-box;

    }

    #rpic{

        position: absolute;

    }

    </style>

    <script type="text/javascript">

    window.onload = function(){

        var left = document.getElementById("left");

        var right = document.getElementById("right");

        var rpic = document.getElementById("rpic");

        var box = document.getElementById("box");

        var cover = document.getElementById("cover");

        // 给左侧加鼠标移动事件

        cover.onmousemove = function(){

            //获得事件对象

            var ev = window.event;

            var mouse_left = ev.offsetX || ev.layerX;

            var mouse_top = ev.offsetY || ev.layerY;

            // document.title = mouse_left + '|' +  mouse_top;

            //计算色块的位置

            var box_left = mouse_left - ;

            var box_top = mouse_top - ;

            // 判断是否超出

            if (box_left < ) {

                box_left = ;

            }

            if (box_left > ) {

                box_left = ;

            }

            if (box_top < ) {

                box_top = ;

            }

            if (box_top > ) {

                box_top = ;

            }

            // 让色块移动

            box.style.left = box_left + 'px';

            box.style.top = box_top + 'px';

            //计算右侧图片位置

            var rpic_left = box_left*-;

            var rpic_top = box_top*-;

            // 让右侧移动

            rpic.style.left = rpic_left + 'px';

            rpic.style.top = rpic_top + 'px';

        }

            //给左侧加鼠标移入事件

            cover.onmouseover = function(){

                // 让左侧色块和右侧隐藏

                box.style.display = 'block';

                right.style.display = 'block';

            }

            // 给左侧加鼠标移出事件

            cover.onmouseout = function(){

                // 让左侧色块和右侧隐藏

                box.style.display = 'none';

                right.style.display = 'none';

            }

    }

    </script>

</head>

<body>

    <div id="left">

        <div id="box"></div>

        <div id="cover"></div>

    </div>

    <div id="right">

        <img src="http://chuantu.biz/t6/17/1503469419x2063891122.jpg" id="rpic">

    </div>

</body>

</html>

前端JS电商放大镜效果的更多相关文章

  1. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  2. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  3. js 实现商品放大镜效果

    知识点,需熟悉下面属性及含义: offsetLeft           //获取元素相对左侧的距离 (计算是从最左侧边框外开始) offsetTop           //获取元素相对顶部的距离 ...

  4. js代码实现放大镜效果

    每当打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是非常好理解.如下图展示所见: 很是常见,在此记载一下,毕 ...

  5. 封装了一个电商放大镜移入放大的功能，适用于VUE

    代码地址:https://github.com/zhongqiulan/jqimgzoom 由于vue只支持ie9以上版本,所以这个插件也是一样的 效果图: 第一步,在goodsinfo文件中引入cs ...

  6. js---电商中常见的放大镜效果

    js中的放大镜效果 在电商中,放大镜效果是很常见的,如下图所示: 当鼠标悬浮时,遮罩所在区域在右侧进行放大. 在动手写之前,我们要先理清思路,分析需求,所需知识点,再将每一块进行组装,最后进行功能的完 ...

  7. js原生淘宝京东宝贝放大镜效果

    js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...

  8. Spark大型电商项目实战-及其改良之番外(1)-将spark前端页面效果高效拷贝至博客

    Spark大型电商项目实战-及其改良这个系列的时间轴展示图一直在变....1-3篇是用图直接表示时间轴,用一段简陋的html代码表示时间表.第4篇开始才是用比较完整的前端效果,能移动.缩放时间轴,鼠标 ...

  9. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

随机推荐

  1. assert.fail()

    assert.fail(message) assert.fail(actual, expected[, message[, operator[, stackStartFunction]]]) oper ...

  2. unreal3启动流程总结

    一.启动代码所在工程为Launch(win32),可为所有同一codebase项目共享. 但共享方式很不智能,是通过在源文件中添加大量#if/else条件编译宏来实现,即各项目在自己的工程中添加[程序 ...

  3. 深入浅出HTML PDF扫描版

    <深入浅出HTML>是一部讲述现代Web标准的优秀教程,彻底摒弃了过时的内容,始终贯彻三层分离的思想.书中结合实例讲述如何使用HTML.CSS设计符合现代Web标准的网页,并讲解了如何使用 ...

  4. kingadmin

    kingadmin 是一个模拟 Django admin 开发的后台管理系统,可以用来嵌套在其他的项目中作为单独的 app 程序存在. 执行流程 1.项目启动,开始执行 app_setup.py 文件 ...

  5. 移除KVO的风险

    为之前项目添加一个功能用到了一个开源库XMTextView,然后运行报错提示: 显示没有注册一个叫font的观察者,所以闪退.但是我的UITextView没有添加观察者呀,怎么会删除呢? 原来是由分类 ...

  6. 【mybatis-记录】

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  7. Docker 启动配置和远程访问

    1. 添加Docker 启动时的配置:   vi /etc/default/docker 添加:   DOCKER_OPTS=" --label name=dockerServer1 -H ...

  8. Mac 安装flutter 踩坑记

    完整版请看链接: http://b36d5043.wiz03.com/share/s/2Prl132RpQ3x2XpA4I2oTa2204K0FF0vB4J42tWIEQ04UrAg 首先下载flut ...

  9. 在mac上使用sublime text3搭建opencv3开发环境

    安装sublime text3 打开mac终端,安装brew 安装opencv3,终端输入下面的coomand: brew install opencv@3 注意:@3表示安装的版本,如果不加@3,那 ...

  10. JDK源码-java.lang.String

    1.开篇明志 本文来看看String的源码. 2.Java7 API String介绍 String 类代表字符串.Java 程序中的所有字符串字面值(如 “abc” )都作为此类的实例实现. 字符串 ...