美文网首页
放大镜效果

放大镜效果

作者: 白小虫 | 来源:发表于2017-04-18 10:21 被阅读18次

商城中常用的图片放大效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <style>
        *{margin: 0;padding: 0;}
        body{padding: 100px;}
        #demo{
            width: 400px;
            height: 250px;
            position: relative;
            border: 1px solid #ccc;
        }
        #small-box{
            position: relative;
            z-index: 1;
        }
        #small-box img{
            display: block;
        }
        #float-box{
            display: none;
            width: 160px;
            height: 100px;
            position: absolute;
            background-color: #ffc;
            border: 1px solid #ccc;
            opacity: 0.5;
            filter: alpha(opacity=50);
            cursor: move;
        }
        #mark{
            position: absolute;
            width: 400px;
            height: 250px;
            z-index: 10;
            cursor: move;
            background-color: #fff;
            opacity: 0;
            filter: alpha(opacity=0);
        }
        #big-box{
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 768px;
            height: 512px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;
        }
        #big-box img{
            position: absolute;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div id="demo">
        <div id="small-box">
            <div id="mark"></div>
            <div id="float-box"></div>
            ![](https://img.haomeiwen.com/i1875545/af67ad614d82af67.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </div>
        <div id="big-box">
            ![](https://img.haomeiwen.com/i1875545/aea54178745af3be.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </div>
    </div>

    <script>
        window.onload = function() {
            var objDemo = document.getElementById('demo');
            var objSmallBox = document.getElementById('small-box');
            var objMark = document.getElementById('mark');
            var objFloatBox = document.getElementById('float-box');
            var objBigBox = document.getElementById('big-box');
            var objBigBoxImage = objBigBox.getElementsByTagName('img')[0];

            objMark.onmouseover = function() {
                objFloatBox.style.display = 'block';
                objBigBox.style.display = 'block';
            }

            objMark.onmouseout = function() {
                objFloatBox.style.display = 'none';
                objBigBox.style.display = 'none';
            }

            objMark.onmousemove = function(e) {
                var _event = e || window.event;

                var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
                var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

                if (left < 0) {
                    left = 0;
                } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
                    left = objMark.offsetWidth - objFloatBox.offsetWidth;
                }

                if (top < 0) {
                    top = 0;
                } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
                    top = objMark.offsetHeight - objFloatBox.offsetHeight;
                }

                objFloatBox.style.left = left + 'px';
                objFloatBox.style.top = top + 'px';

                var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
                var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

                objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + 'px';
                objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + 'px';
            }
        }
    </script>
</body>
</html>

简书会自动上传外链图片,所以这里代码里面img标签里面对应的换两个地址【@换成.】,http://7xr9pe.com1.z0.glb.clouddn.com/small@jpghttp://7xr9pe.com1.z0.glb.clouddn.com/big@jpg
效果如下所示:

放大镜预览效果

相关文章

  • iOS放大镜效果实现-ASMagnifierManger

    ASMagnifierManger 放大镜效果。可更改放大倍数和放大镜大小 特点介绍 放大镜效果 放大镜形状自定义...

  • 放大镜效果

    写在最前面:一定要注意设置样式的时候大图片和小图片的width,height是有比例关系的;废话不多说,直接放效果...

  • 放大镜效果

    基本原理,左边有一个盛放图片的容器,里面有哥哥小的遮罩用来提示把那一部分展示到右边的大的展示放大之后的图片的部分左...

  • 放大镜效果

    商城中常用的图片放大效果 简书会自动上传外链图片,所以这里代码里面img标签里面对应的换两个地址【@换成.】,ht...

  • 放大镜效果

    *{ margin:0; padding:0; } body{ width: 960p...

  • 放大镜效果

  • 放大镜效果

    核心原理1、鼠标经过遮罩层显示,离开隐藏;2、移动鼠标遮罩层跟随,鼠标超出大盒子后遮罩层不跟随出框;3、移动遮罩层...

  • 十.放大镜效果的demo

    详情页放大镜效果收录 Javascript HTML CSS

  • js 放大镜效果

    *{ margin:0; padding:0;} box{ pos...

  • JS 放大镜效果

    效果在这里!!~ CSS样式 HTML 布局 js部分~ 转载请注明出处喔~

网友评论

      本文标题:放大镜效果

      本文链接:https://www.haomeiwen.com/subject/tqrfzttx.html