前端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. display与position之间的关系

    以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式 ...

  2. 关于login/interactive/no-interactive shell和profile/bash_profile/bashrc

    login shell:第一次登录进系统时的shell,一般是指本机启动时的控制台shell或者ssh远程登录时的shell. interactive shell:登录以后,再打开控制台时运行的she ...

  3. redis系列：通过共同好友案例学习set命令

    前言 这一篇文章将讲述Redis中的set类型命令,同样也是通过demo来讲述,其他部分这里就不在赘述了. 项目Github地址:https://github.com/rainbowda/learnW ...

  4. MySQL 文件导入出错

    ERROR 1290 (HY000): The MySQL server is running with the --secure-file-priv option so it cannot exec ...

  5. 【解决】client does not support authentication

    cmd窗口登陆mysql: C:\Users\Administrator>  sqlplus  /nolog mysql>  conn / as sysdba; mysql> alt ...

  6. c#事件1

    Private void button_clicked( object sender ,RouteEventArgs e) sender :引发事件的对象 源 e :      路由事件,提供可能重要 ...

  7. vim 设置TAB宽度、显示行号、自动缩进、自动换行宽度

    一.vim  ~/.vimrc 二.添加如下几行:(括号中的不是,是我添加的) set shiftwidth=4          (表示每一级缩进的长度)set softtabstop=4     ...

  8. 2017-10-5 清北刷题冲刺班a.m

    行列式 序列 #include<iostream> #include<cstdio> #define maxn 500010 using namespace std; int ...

  9. python-django框架中使用七牛云

    1:注册七牛云账号 https://www.qiniu.com/ js文件 链接:https://pan.baidu.com/s/1BW1svHqEsXrrTNtRobKkpg  提取码:ixta 2 ...

  10. 关于webpack的版本导致的postcss-loader的问题

    来源自问题 https://segmentfault.com/q/1010000006987956 !!!发现这解决方案还是不能用,估计是webpack又更新了一轮,请看看下下方的答案 某个版本web ...