• 放大镜的效果显示


    <!DOCTYPE html>
    <html>
    <head>
        <title>放大镜效果显示</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
        <style type="text/css">
        #demo {display: block; 410px;height: 385px;position: relative;}
        #small-box {position: relative;z-index: 1;}
        #small-box img { 400px;height: 385px;}
        #float-box {display: none; 160px;height: 120px;position: absolute;background-size: #ffffcc;border:1px solid #ccc;filter:alpha(opacity=50);opacity: 50;cursor: move;}
        #big-box {display: none;position: absolute;top:0px;left: 460px; 400px;height: 400px;overflow: hidden;border:1px solid #ccc;z-index: 1;}
        #big-box img {position: absolute;z-index: 5;}
        #mark {position: absolute;display: block; 400px;height: 385px;z-index: 10;cursor: move;background:#fff;filter:alpha(opacity:0); opacity:0;}
        </style>
        <script type="text/javascript">
        $(document).ready(function(){
            // 放大镜效果
            var objDemo=document.getElementById("demo");
            var objSmallBox=document.getElementById("small-box");
            var objFloatBox=document.getElementById("float-box");
            var objBigBox=document.getElementById("big-box");
            var objBigBoxImage=document.getElementById("img1");
            var objMark=document.getElementById("mark");

            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(ev) {
                var _event=ev || window.event;
                var left=_event.pageX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2 || _event.clientX +document.documentElement. scrollLeft-document.documentElement.clientLeft-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;
                var top=_event.pageY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2 || _event.clientY +document.documentElement. scrollTop-document.documentElement.clientTop-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 parcentX=left / (objMark.offsetWidth-objFloatBox.offsetWidth);
                var parcentY=top / (objMark.offsetHeight-objFloatBox.offsetHeight);
                objBigBoxImage.style.left=-parcentX*(objBigBoxImage.offsetWidth-objBigBox.offsetWidth)+"px";
                objBigBoxImage.style.top=-parcentY*(objBigBoxImage.offsetHeight-objBigBox.offsetHeight)+"px";
            }
        })
        </script>
    </head>
    <body>
    <div id="demo">
        <div class="bigPic" id="small-box">
            <div id="mark"></div>
            <div id="float-box"></div>
            <img src="image/1.jpg">
        </div>
        <div class="bigPic-p" id="big-box">
            <img src="image/54.png" id="img1">
        </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    双色球的概率和收益
    伽玛函数
    概率统计13——二项分布与多项分布
    贝叶斯决策理论(1)
    线性代数笔记34——左右逆和伪逆
    线性代数笔记33——基变换和图像压缩
    线性代数笔记32——线性变换及对应矩阵
    线性代数笔记31——奇异值分解
    线性代数笔记30——相似矩阵和诺尔当型
    线性代数笔记29——正定矩阵和最小值
  • 原文地址:https://www.cnblogs.com/maxiaodan/p/4776400.html
Copyright © 2020-2023  润新知