前端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. Hive 查询优化总结

    一.join优化 Join查找操作的基本原则:应该将条目少的表/子查询放在 Join 操作符的左边.原因是在 Join 操作的 Reduce 阶段,位于 Join 操作符左边的表的内容会被加载进内存, ...

  2. 1.4 如何防止sql注入

    如何防止sql注入   1.检查变量数据类型和格式 如果你的SQL语句是类似where id={$id}这种形式,数据库里所有的id都是数字,那么就应该在SQL被执行前,检查确保变量id是int类型: ...

  3. IQA(图像质量评估)

    图像质量评价(Image Quality Assessment,IQA)是图像处理中的基本技术之一,主要通过对图像进行特性分析研究,然后评估出图像优劣(图像失真程度). 主要的目的是使用合适的评价指标 ...

  4. Ansible Jinja2使用

    常用方法 ternary 根据结果的真假来决定返回值 - name: Set container backend to "dir" or "lvm" based ...

  5. 使用tuple统计文件中单词的个数

    name = input("Enter file:") if len(name) < 1 : name = "input.txt" fhand = ope ...

  6. Tour（dp）

    Tour(dp) 给定平面上n(n<=1000)个点的坐标(按照x递增的顺序),各点x坐标不同,且均为正整数.请设计一条路线,从最左边的点出发,走到最右边的点后再返回,要求除了最左点和最右点之外 ...

  7. 【常见Web应用安全问题】

    Web应用程序的安全性问题依其存在的形势划分,种类繁多,这里不准备介绍所有的,只介绍常见的一些. 常见Web应用安全问题安全性问题的列表: 1.跨站脚本攻击(CSS or XSS, Cross Sit ...

  8. AT2161 シャッフル / Shuffling

    传送门 其实有一个显然的性质嘛:对于每个数,其实只要考虑它最右能被换到的位置就好了 然后设\(f[i][j]\)表示已经处理完了前\(i-1\)位,当前还有\(j\)个\(1\)可以自由支配(注意这里 ...

  9. 使用JMeter进行API功能测试

    使用JMeter进行API功能测试 Apache JMeter是一种流行的开源软件,用于性能测试. 在本博客中,我们将阐明如何使用JMeter for REST API自动化进行功能测试. 我们使用了 ...

  10. MD5-UTF8-大写加密

    private string GetMD5Hash(string str) { string md5Str = ""; byte[] buffer = Encoding.UTF8. ...