图片放大镜注释详解_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

图片放大镜注释详解_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:15 AM

今天的练习是做一个网购网站常见的图片详情介绍的放大镜效果，简单来说就是图片中有对应的区域让你看到放大后的效果。

关于布局：就是两组div，第一组大div放图片，小的是遮盖层。第二组是大图div显示框，里面放大张图片，超过部分隐藏，可以想象下是透过窗户看外面，你看到的只是一部分。

思路：就是两边的比例，重点，比例，话不说，直接上代码。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            *{margin:0 ; padding:0;}            #left{width:300px;                    height:300px;                    border:1px solid gold;                    position:relative;                    float:left;                    margin-right:20px;                    left:10px;                    top:10px;}            #left img{width:300px;                        height:300px;}            #mask{width:90px;                    height:90px;                    background:greenyellow;                    opacity: 0.5;                    position: absolute;                    top:0;                    left:0;                    display:none;                    cursor: move;}            #big{width:600px;                    height:600px;                    overflow: hidden;                    float: left;                    position:relative;                    left: 10px;                    top:10px;                    display:none;                    border:1px solid goldenrod;}            #big img{position: absolute;                    left:0;                    top:0;}                    </style>    </head>    <body>        <div id="left">            <img  src="/static/imghw/default1.png"  data-src="img/5-140526101943.jpg"  class="lazy" / alt="图片放大镜注释详解_html/css_WEB-ITnose" >            <div id="mask"></div>        </div>        <div id="big">            <img  src="/static/imghw/default1.png"  data-src="img/5-140526101943.jpg"  class="lazy" / alt="图片放大镜注释详解_html/css_WEB-ITnose" >        </div>        <script>                 // 左边遮罩层与左边显示框大小的比例对应大图显示区与图片的比例                     window.onload = function(){                var left = document.getElementById("left");                var mask = document.getElementById("mask");                var big = document.getElementById("big");                var bigImg = big.children[0];                                //鼠标移入，遮罩层显示，大图显示区显示                left.onmouseenter = function(){                    mask.style.display = big.style.display ='block';                };                //鼠标移出，遮罩层隐藏，大图显示区隐藏                left.onmouseleave = function(){                    mask.style.display= big.style.display = 'none';                };                                //鼠标移动，遮罩层跟随鼠标，大图显示相关内容                left.onmousemove = function(ev){                    //兼容IE                    var ev = ev || event;

登入後複製

//鼠标在遮罩层中居中显示，鼠标的位置-显示区到body的距离-遮罩层的一半//后面是赋值给遮罩层的距离，所以用到减，鼠标位置不变，是遮罩层在变，所以需要用到减,遮罩层往回挪

                    var l = ev.clientX-this.offsetLeft-mask.offsetWidth/2;                    var t = ev.clientY-this.offsetTop-mask.offsetHeight/2;                    //不让遮罩层出左边显示框的范围                    if(l<=0){                        l=0                    }else if(l>=left.clientWidth - mask.offsetWidth){                        l = left.clientWidth - mask.offsetWidth                    }                    if(t<=0){                        t=0                    }else if(t>=left.clientHeight - mask.offsetHeight){                        t = left.clientHeight - mask.offsetHeight                    }                    //比例,将能够移动的距离做比例                    var percX = l/(this.clientWidth- mask.offsetWidth);                    var percY = t/(this.clientHeight- mask.offsetHeight);                    //大图显示区                                        bigImg.style.left = -percX*(bigImg.offsetWidth - big.clientWidth)+'px';                    bigImg.style.top = -percY*(bigImg.offsetHeight - big.clientHeight)+'px';                    //遮罩层的位置                    mask.style.left = l +'px';                    mask.style.top = t +'px';                };            };        </script>    </body></html>

登入後複製

这是做完的效果，我不知怎么插入图片文件，建议您可以自己拿张图片，修改下地址就行，最好是等宽高的，还有一点就是，如果你觉着遮罩层和显示区域的图片差太多，那你就可以修改下遮罩层的大小就行了。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7873

Java教學

1649

CakePHP 教程

1408

Laravel 教程

1301

PHP教程

1245

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。