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

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

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

<!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. 练习：使用nmcli 配置网络连接

    显示所有连接 # nmcli con show 显示活动连接的所有配置信息 # nmcli con show "System eth0" --->引号内为连接的网卡名称 显示 ...

  2. PHP数组合并+与array_merge的区别分析 & 对多个数组合并去重技巧

    PHP中两个数组合并可以使用+或者array_merge,但之间还是有区别的,而且这些区别如果了解不清楚项目中会要命的! 主要区别是两个或者多个数组中如果出现相同键名,键名分为字符串或者数字,需要注意 ...

  3. javascript基础05

    javascript基础05 1.变量的作用域 变量既可以是全局,也可以是局部的. 全局变量:可以在脚本中的任何位置被引用,一旦你在某个脚本里声明了全局变量,你就可以 在这个脚本的任何位置(包括函数内 ...

  4. 12个非常实用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  5. Android手机截屏方法

    <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/> <u ...

  6. java1

    1:计算机概述(了解) (1)计算机 (2)计算机硬件 (3)计算机软件 系统软件:window,linux,mac 应用软件:qq,yy,飞秋 (4)软件开发(理解) 软件:是由数据和指令组成的.( ...

  7. JavaScript高级程序设计学习笔记--事件

    HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()&q ...

  8. .NET LINQ 数据分组

    数据分组      分组指将数据放入组中以便每个组中的元素共享公共特性的操作.   方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表达式语法 更多信息 GroupBy 对共享 ...

  9. Gym - 101102C

    题目链接 #include <bits/stdc++.h> using namespace std; ; int data[maxn],last[maxn],ans; struct D { ...

  10. <input />文字方框中，字体颜色的变化 要求默认的字体颜色是灰色，当要输入字时，字体是正常的黑色

    <input type="text" name="address" size="60" maxlength="60" ...