图片放大镜注释详解_html/css_WEB-ITnose
今天的练习是做一个网购网站常见的图片详情介绍的放大镜效果，简单来说就是图片中有对应的区域让你看到放大后的效果。
关于布局：就是两组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>这是做完的效果，我不知怎么插入图片文件，建议您可以自己拿张图片，修改下地址就行，最好是等宽高的，还有一点就是，如果你觉着遮罩层和显示区域的图片差太多，那你就可以修改下遮罩层的大小就行了。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1387
52
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
