大家几乎都有在网上购物的经验，有的网站会有一个商品放大镜功能，

就是把鼠标移到图片上的时候，旁边会有另外一张大的图片展示，等同于

放大镜效果，那这样的效果怎样实现的呢，我把代码发给大家，请大家参考。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>放大镜</title>

    <style>

    *{margin:0;padding: 0;}

    #warp{width: 1184px;height:500px;margin:50px auto 0;background-color: #ccc;overflow: hidden;padding: 10px;position: relative;}

    #warp #minbox{width: 350px;height: 350px;float: left;position: relative;}

    #maxbox{width: 400px;height: 400px;position: absolute;left: 380px;overflow: hidden;display: none;}

    #maxbox img{width: 800px;height: 800px;position: absolute;}

    #con{float: left;margin-left: 20px;}

    #meng{width: 175px;height: 175px;position: absolute;background-color:yellow;opacity:0.4;filter:alpha(opacity=40);left: 0;top: 0;display: none;}

    </style>

</head>

<body>

    <div id="warp">

        <div id="minbox">

            <img src="data:images/min.jpg" alt="">

            <p id="meng"></p>

        </div>

        <div id="maxbox">

            <img src="data:images/max.jpg" alt="">

        </div>

        <div id="con">

            <img src="data:images/msg.png" alt="">

        </div>

    </div>

    <script>

        var minbox=document.getElementById('minbox');

        var meng=document.getElementById('meng');

        var maxbox=document.getElementById('maxbox');

        var maximg=maxbox.getElementsByTagName('img')[0];

        var minimg=minbox.getElementsByTagName('img')[0];

        function offsetTL(obj){

            var ofL=0,ofT=0;

            while(obj){

                ofL+=obj.offsetLeft+obj.clientLeft;

                ofT+=obj.offsetTop+obj.clientTop;

                obj=obj.offsetParent;

            }

            return{left:ofL,top:ofT};

        }

        minbox.onmousemove=function(e){

            var e=e||window.event;

            meng.style.display='block';

            maxbox.style.display='block';

            var niubi1=e.clientX-offsetTL(minbox).left-meng.clientWidth/2;//蒙板的X坐标

            var niubi2=e.clientY-offsetTL(minbox).top-meng.clientHeight/2;//蒙板的Y坐标

            var bili=maximg.clientWidth/minimg.clientWidth;

            if (niubi1<=0) {

                niubi1=0;

            }else if (niubi1>=minbox.clientWidth-meng.clientWidth) {

                niubi1=minbox.clientWidth-meng.clientWidth;

            }

            if (niubi2<=0) {

                niubi2=0;

            }else if (niubi2>=minbox.clientHeight-meng.clientHeight) {

                niubi2=minbox.clientHeight-meng.clientHeight;

            }

            console.log(niubi1);

            console.log(niubi2);

            meng.style.left=niubi1+'px';

            meng.style.top=niubi2+'px';

            maximg.style.left=-parseInt(meng.style.left)*bili+'px';

            maximg.style.top=-parseInt(meng.style.top)*bili+'px';

        }

        minbox.onmouseout=function(){

            meng.style.display='none';

            maxbox.style.display='none';

        }

    </script>

</body>

</html>

利用JS实现购物网站商品放大镜效果的更多相关文章

  1. css3购物网站商品文字提示实例

    css3购物网站商品文字提示实例先来看效果图:<ignore_js_op> 当鼠标划过图片时,有着泰迪熊黑色长方形的背景就会出现.来看HTML5+CSS3代码: <!DOCTYPE ...

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

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

  3. js购物时的放大镜效果

    首先需要两张一样的图片,一张大图,一张小图,大图显示,当鼠标移入时,小图上出现一个滑块,可以滑动,大图也跟着显示,大图的显示区域和小图一样,当滑块滑到不同的位置,大图显示不同的区域,当鼠标移出时,滑块 ...

  4. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  5. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  6. JS实现购物商城商品放大

    img属于行内元素 <img src=''>gq</img> 效果 当放大图片时候,文字位置发生改变 文字出现在图片下方,因为图片有一个隐形的g线,这条线的位置和以前上学时候, ...

  7. 利用js键盘事件制作会移动效果

    会移动的方块 描述 按键盘上的方向键方块会移动,按住alt键和方向键进行大幅度移动 <!DOCTYPE html> <html lang="en"> < ...

  8. canvas+javascript实现淘宝商品放大镜效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 淘宝商品放大镜效果-JavaScript

    效果图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. （转载）JavaWeb学习总结(五十三)——Web应用中使用JavaMail发送邮件

    博客源地址:http://www.cnblogs.com/xdp-gacl/p/4220190.html 现在很多的网站都提供有用户注册功能, 通常我们注册成功之后就会收到一封来自注册网站的邮件.邮件 ...

  2. wdcp安装memcached解决办法

    1.下载libevent-1.4.14b-stable.tar.gz和memcached-1.4.15.tar.gz这两个文件,上传到服务器,并给它一个可用的下载地址, 如http://地址/memc ...

  3. 使用github pages， hexo搭建个人博客教程

    具体的原理性的东西就不说了直接上教程,怕等下自己忘了. 一. github 阶段 申请一个github 账号并成功登录进去. 创建一个名字为xxx.github.io的空项目. 二. hexo 阶段 ...

  4. Apache curator-client详解

    Apache curator框架中curator-client组件可以作为zookeeper client来使用,它提供了zk实例创建/重连机制等,简单便捷.不过直接使用curator-client并 ...

  5. Python之模块，迭代器与生成器

    本节涉及内容: 1. 迭代器和生成器 2. 递归 3. 字符串格式化 4. 模块 内置模块 自定义模块 第三方模块 5. 序列化的模块 json pickle (一). 迭代器和生成器: 迭代器:  ...

  6. poj2492_A Bug's Life_并查集

    A Bug's Life Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 34947   Accepted: 11459 D ...

  7. C# 使用SqlBulkCopy类批量复制大数据

    用途说明: 前些日子,公司要求做一个数据导入程序,要求将Excel数据,大批量的导入到数据库中,尽量少的访问数据库,高性能的对数据库进行存储.于是在网上进行查找,发现了一个比较好的解决方案,就是采用S ...

  8. [转]odoo常用openerp-server.conf配置参数详解

    参数 说明 用法 addons_path addons模块的查找路径,多个路径用逗号分隔 addons_path = E:\GreenOdoo8.0\source\openerp\addons csv ...

  9. 异或之（bzoj 3689）

    Description 给定n个非负整数A[1], A[2], --, A[n].对于每对(i, j)满足1 <= i < j <= n,得到一个新的数A[i] xor A[j],这 ...

  10. PHP【函数】

    目录:[PHP函数].[PHP数组] 一.PHP常用函数(和JS一样)函数的四要素:①返回类型②函数名③参数类型④函数体因为PHP是弱类型语言,所以可以不用写返回类型,但是其他三个要素都是必须要写的. ...