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

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

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

<!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. tyvj1125 JR's chop

    描述 JR有很多双筷子.确切的说应该是很多根,因为筷子的长度不一,很难判断出哪两根是一双的.JR家里来了K个客人,JR留下他们吃晚饭.加上JR,JR的girl friend和JR的朋友内涵,共K+3个 ...

  2. 数位dp模板

    #include <bits/stdc++.h> typedef long long LL; const int MOD = (int)1e9 + 7; LL L,R,G,T; int d ...

  3. word20161210

    gateway / 网关 gateway account / 网关帐户 Gateway Service for NetWare / NetWare 网关服务 GDI objects / GDI 对象 ...

  4. angularjs表单验证checkbox

    angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...

  5. Python3实现简单的爬虫功能

    python3简单实现一个爬去网站图片的小功能: 有时候想要下载自己喜欢的多个图片时,不需要一个个点击来下载,使用python脚本批量拉取,并保存到本地. 1. 首先找到自己要下载图片的url 2. ...

  6. ReactiveCocoa学习

    ReactiveCocoa常见类 6.1RACSiganl:信号类,一般表示将来有数据传递,只要有数据改变,信号内部接收到数据,就会马上发出数据. 注意: 信号类(RACSiganl),只是表示当数据 ...

  7. Android笔记：android的适配

    public int Dp2Px(Context context, float dp) { final float scale = context.getResources().getDisplayM ...

  8. VR技术的探索阶段

    转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 早在1929年,在长期使用教练机训练器(机翼变短,不能产生离开地面所需的足够提升力)进行飞行训练之后,E ...

  9. Python常见问题及资料收集

    1,字符编码处理: http://bbs.chinaunix.net/thread-1431029-1-1.html

  10. FTP安装与使用

    1.查看ftp是否已安装:rpm -qa | grep vsftpd 2.安装ftp:rpm -ivh vsftpd 或yum install vsftpd 3.匿名用户配置文件主要参数: anony ...