前端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. [HDU1003]最长子序列和

    http://acm.hdu.edu.cn/showproblem.php?pid=1003 解题关键:1.最大连续子序列和模板 2.max.end不能使用,在oj中会显示编译错误 3.注意模板中没有 ...

  2. C++经典题目：约瑟夫环问题

    问题描述: 有n个人围成一圈,顺序排号.从第一个人开始报数(1~3报数),凡报到3的人退出圈子,问最后留下的人原来排在第几号. 分析: 首先由用户输入人数n,然后对这n个人进行编号[因为如果不编号的话 ...

  3. Hive Joins 用法与操作

    Hive表连接的语法支持如下: join_table: table_reference JOIN table_factor [join_condition] | table_reference {LE ...

  4. pig flatten

    今天通过不断的尝试,终于知道这个flatten的用法了.其实吧,有时候关键是要test,才能充分理解解说.不过,同事给说的有点问题,误导了我.整的我一直没明白怎么回事. 这是官方的解释: The FL ...

  5. Python通过调用windows命令行处理sam文件

    Python通过调用windows命令行处理sam文件 以samtools软件为例 一.下载或者索取得到windows版本的samtools软件,解压后如下: 进入文件内部,有如下几个文件: 二.将s ...

  6. Entity Framework Code-First（6）：Database Initialization

    Database Initialization: We have seen that Code First creates a database automatically in the Simple ...

  7. 6.6 Ubuntu 安装　截图工具　Shutter

    可参考: http://blog.csdn.net/hanshileiai/article/details/46843713

  8. Spring入门第二十三课

    我们看基于XML配置的方式配置AOP 看代码: package logan.study.aop.impl; public interface ArithmeticCalculator { int ad ...

  9. try catch 块中debug时发现错误细节的一次记录

    在解决已有代码的一个问题时,有一个try catch块,基本代码如下: try { //do something } catch { LogHelper.Debug(typeof(myHelper), ...

  10. 6.【应急响应】Linux入侵排查思路

    0x01 入侵排查思路 一.账号安全 基本使用: 1.用户信息文件/etc/passwd root:x:0:0:root:/root:/bin/bash account:password:UID:GI ...