前端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. Wannafly 锁

    题意: 现在有 $n$ 个人,每个人有一个已然给定的重要度 $a_i$,现有 K 个锁,每个锁有若干钥匙,分配给一些人,要求一群人能够打开全部 $K$ 把锁, 当且仅当他们重要度的和大于等于 $m$, ...

  2. 6、RNA-Seq Analysis Pipeline

    Created by Dhivya Arasappan, last modified by Dennis C Wylie on Nov 08, 2015 This pipeline uses an a ...

  3. ZOJ 3946 Highway Project (最短路)

    题意:单源最短路,给你一些路,给你这些路的长度,给你修这些路的话费,求最短路和最小花费. 析:本质就是一个最短路,不过要维护两个值罢了,在维护花费时要维护的是该路要花多少,而不是总的路线花费. 代码如 ...

  4. hdu1058

    #include<iostream> #include<string> using namespace std; int const N = 4; int map[N] = { ...

  5. Dijkstra 路径规划 C#

    示例无向图如下:(起始点为v0) 邻接矩阵为: 注意:其中没有连接的边和自己到自己的点权值用10000表示. 代码: static void Main(string[] args) { , , , , ...

  6. 洛谷P1378 油滴扩展

    P1378 油滴扩展 题目描述 在一个长方形框子里,最多有N(0≤N≤6)个相异的点,在其中任何一个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油滴扩展完 ...

  7. Python使用Zero-Copy和Buffer Protocol实现高性能编程

    无论你程序是做什么的,它经常都需要处理大量的数据.这些数据大部分表现形式为strings(字符串).然而,当你对字符串大批量的拷贝,切片和修改操作时是相当低效的.为什么? 让我们假设一个读取二进制数据 ...

  8. POJ1141Brackets Sequence 解题报告

    题目链接1 题目链接2 题目大意 给出一个括号序列,添加最少的括号使序列正确 解题思路 先将问题简单化,从求序列退化为求最小添加括号数的问题 用区间dp n³解决 f[l][r]表示使第l个到r个区间 ...

  9. php保存网络图片到本地

    //保存网络图片 function getimg($url) { $state = @file_get_contents($url,0,null,0,1);//获取网络资源的字符内容 if($stat ...

  10. jmeter 正则获取参数集合和ForEach控制器结合使用(转)

    怎么把第一个请求获取的返回的多个id,在第二个请求中逐个以单个id作为请求参数来请求? 为了解决这个问题,模拟下该场景 1.请求www.163.com 主页,获取响应中的所有数字,这个获取的数字集合暂 ...