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

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

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

<!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. PHP二维数组排序(list_order)

    /** * 对二维数组进行排序 * 模拟 数据表记录按字段排序 * * <code> * @list_order($list, $get['orderKey'], $get['orderT ...

  2. PHP如何快速读取大文件

    在PHP中,对于文件的读取时,最快捷的方式莫过于使用一些诸如file.file_get_contents之类的函数,简简单单的几行代码就能 很漂亮的完成我们所需要的功能.但当所操作的文件是一个比较大的 ...

  3. Linux 定时任务 Crontab命令 详解

    前言 crontab是Unix和Linux用于设置周期性被执行的指令,是互联网很常用的技术,很多任务都会设置在crontab循环执行,如果不使用crontab,那么任务就是常驻程序,这对你的程序要求比 ...

  4. iOS为真机调试增加scribble来定位野指针

    尽管在ARC中,野指针出现的频率已经大大降低了,但是仍然会有野指针困扰着我们. 在模拟器调试中,我们可以开启scribble或者zombieObject来将已经释放的内存填充无意义的内容,能够将一些非 ...

  5. java基础知识（四）java内存机制

    Java内存管理:深入Java内存区域 上面的文章对于java的内存管理机制讲的非常细致,在这里我们只是为了便于后面内容的理解,对java内存机制做一个简单的梳理. 程序计数器:当前线程所执行的字节码 ...

  6. 如何使用JS来检测游览器是什么类型，或android是什么版本号- 转载

    var brower = { versions:function(){ var u = window.navigator.userAgent; var num ; if(u.indexOf('Trid ...

  7. 2015-9月份，Android开发，面试题总结，主要记录没有答出来的问题

    9月13日,秒针面试(跪) 1.使用HTML5写Android 与本地应用比较 9月21日,百度一面(跪)1.Android的整个启动过程,什么阶段启动了什么进程,或者服务 2.Android系统框架 ...

  8. Hydra用户手册

    Hydra 参数: -R继续从上一次进度接着破解 -S大写,采用SSL链接 -s <PORT>小写,可通过这个参数指定非默认端口 -l <LOGIN>指定破解的用户,对特定用户 ...

  9. 数据库模型设计PowerDesigner

    Power Designer 是Sybase公司的CASE工具集,使用它可以方便地对管理信息系统进行分析设计,他几乎包括了数据库模型设计的全过程.利用Power Designer可以制作数据流程图.概 ...

  10. SQLServer2008设置 开启远程连接

    SQLServer2008设置 开启远程连接 前一段时间,学生分组做项目,使用SVN工具,要求功能使用存储过程,在数据库这块出现这么一个问题: A学生在他的数据库上添加了存储过程,需要其他的B,C,D ...