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

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

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

<!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. (PPT)Linux服务器基础

  2. JBOSS 5 session时间配置

    C:\jboss-5.1.0.GA\server\default\deployers\jbossweb.deployer web.xml <session-config>     < ...

  3. JS正则表达式元字符

    https://segmentfault.com/a/1190000002471140

  4. js跨域解决方案（转载）

    1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本 ...

  5. 「转」xtrabackup新版详细说明

    声明:本文由我的同事@fiona514编写,是我看过的最用心的中文说明介绍,强烈推荐大家学习使用. Percona Xtrabackup 2.4.1 编译及软件依赖 centos5,6 需要升级cma ...

  6. xcode8 info.plist文件中的各种权限。

    NSContactsUsageDescription -> 通讯录 NSMicrophoneUsageDescription -> 麦克风 NSPhotoLibraryUsageDescr ...

  7. 各大就业网站对web前端的就业要求

    今日与女神有约,在[web前端学习部落22群]有直播公开课,喜欢的朋友赶紧加入吧!随着高等教育的普及,高校毕业生的人数每年都以极快的速度增长,数据显示,2016年,高校毕业生多达765万人,比2015 ...

  8. WCF创建RESTService

    这篇博客将介绍在WCF中创建REST服务相关内容.首先先看一下的项目结构: Contract,Service两个工程为类库工程,需要添加System.ServiceModel, System.Serv ...

  9. xamarin.Android 标记1

    群里一个朋友的博客 推荐一下 自己也做个书签记录. http://sunyt.me/2015/04/15/Xamarin-FAQ/

  10. http返回码301、302、307、305含义和区别

    301永久重定向,302暂时移动,seo对301和302的处理不一样: 301和302会出现数据丢失问题,重定向后请求数据丢失: 307临时重定向,数据不会丢失: