(编辑:jimmy 日期: 2024/12/23 浏览:2)
本文实例为大家分享了js实现放大镜效果的具体代码,供大家参考,具体内容如下
该放大区域用背景图片放大
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style type="text/css"> body { height: 1200px; background-color: lightskyblue; } ul { margin: 0; padding: 0; list-style: none; } .itemarea { position: relative; width: 500px; height: 680px; border: 1px black solid; margin: 50px auto; } .itemarea .pic { margin-bottom: 15px; } .itemarea img { width: 500px; height: 600px; } .itemarea .pic .cover { position: absolute; left: 0; top: 0; width: 200px; height: 200px; background-image: url(img/7.png); opacity: 0.6; display: none; } .itemarea .list { display: flex; } .itemarea .list li { margin: auto; } .itemarea .list img { display: block; width: 50px; height: 50px; } .itemarea .detail { position: absolute; top: 0; left: 500px; /* 此处为放大2倍,显示框的大小是遮阴框宽高的2倍 */ width: 400px; height: 400px; display: none; border: 1px black solid; background: url(img/1.PNG); /* 此处放大2倍,背景图片的宽高是左边显示图片的2倍 */ background-size: 1000px 1200px; /* background-size: 200%; 或者这样写*/ } .itemarea .list .current { border: 2px green solid; } </style> </head> <body> <div class="itemarea"> <div class="pic"> <img src="/UploadFiles/2021-04-02/1.PNG">效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。