使用js实现放大镜的效果

最新推荐文章于 2023-08-30 23:12:02 发布
最新推荐文章于 2023-08-30 23:12:02 发布
阅读量473 收藏 1
点赞数
文章标签： js html css 放大镜
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huang14110581062/article/details/52892344
版权

效果展示：


js文件：
window.onload = function() {
    var floatBox = document.getElementById("floatBox");
    var bigBox = document.getElementById("bigBox");
    var imgBox = document.getElementById("imgBox");
    var img1 = document.getElementById("img1");
    var img2 = document.getElementById("img2");
    var img3 = document.getElementById("img3");
    var img4 = document.getElementById("img4");
    var img5 = document.getElementById("img5");
    var img6 = document.getElementById("img6");
    var smallBox = document.getElementById("smallBox");
    var icon1= document.getElementById("icon1");
    var icon2= document.getElementById("icon2");
    var icon3= document.getElementById("icon3");
    var icon4= document.getElementById("icon4");
    var icon5= document.getElementById("icon5");
    img2.onmouseover = function(){
        var value=img2.alt;
        img1.src="img/衣"+value+value+".jpg";
    };
    img3.onmouseover = function(){
        var value=img3.alt;
        img1.src="img/衣"+value+value+".jpg";
    };
    img4.onmouseover = function(){
        var value=img4.alt;
        img1.src="img/衣"+value+value+".jpg";
    };
    img5.onmouseover = function(){
        var value=img5.alt;
        img1.src="img/衣"+value+value+".jpg";
    };
    img6.onmouseover = function(){
        var value=img6.alt;
        img1.src="img/衣"+value+value+".jpg";
    };
    smallBox.onmouseover = function(){
        imgBox.src=img1.src;
        floatBox.style.display = "block";
        bigBox.style.display = "block";
    }
    smallBox.onmouseout = function(){
        floatBox.style.display = "none";
        bigBox.style.display = "none";
    }
    smallBox.onmousemove = function(e){
        var event = e || window.event;
        var left = event.clientX-smallBox.offsetLeft-floatBox.offsetWidth/2;
        var top = event.clientY-smallBox.offsetTop-floatBox.offsetHeight/2;
        smallBox.offsetWidth - floatBox.offsetWidth;
       if(left<0) left=0;
        else {if(left>(smallBox.offsetWidth - floatBox.offsetWidth))
         left = smallBox.offsetWidth - floatBox.offsetWidth;}
        if(top<0) top=0;
        else {if(top>(smallBox.offsetHeight-floatBox.offsetHeight))
            top = smallBox.offsetHeight-floatBox.offsetHeight;}
            floatBox.style.left= left + "px";
            floatBox.style.top= top + "px";
            imgBox.style.left = -(left * imgBox.offsetWidth)/smallBox.offsetWidth + "px";
            imgBox.style.top = -(top * imgBox.offsetHeight)/smallBox.offsetHeight + "px";
        }
    }

css文件

#floatBox{
    width: 100px;
    height: 100px;
    display: none;
    opacity: 0.7;
    background: #CAFF70;
    border: 1px #FF0000;
    position: absolute;
    margin: 0px;
    z-index: 1;
}
#smallBox{
    width: 400px;
    height: 400px;
    left: 50px;
    top: 50px;
    display: block;
    background:#FFFF00;
    border: 1px #FF0000;
    position: absolute;
}
#img1{
    width: 400px;
    height: 400px;
    left: 0px;
    top: 0px;
    display: block;
    background:#FFFF00;
    border: 1px #FF0000;
    position: absolute;
}
#bigBox{
    width: 400px;
    height: 400px;
    left: 460px;
    top: 50px;
    overflow: hidden;
    display: none;
    background:#FF0000;
    border: 1px #FF0000;
    position: absolute;
}
#imgBox{
    width: 1600px;
    height: 1600px;
    position: absolute;
}
#img2{
    width: 50px;
    height:50px;
    border: 1px;
    left: 65px;
    top: 470px;
    border: 1px #FFFFFF;
    position: absolute;
}
#img3{
    width: 50px;
    height:50px;
    border: 1px;
    left: 145px;
    top: 470px;
    position: absolute;
}

#img4{
    width: 50px;
    height:50px;
    border: 2px;
    left: 225px;
    top: 470px;
    position: absolute;
}

#img5{
    width: 50px;
    height:50px;
    border: 2px;
    left: 305px;
    top: 470px;
    position: absolute;
}
#img6{
    width: 50px;
    height:50px;
    border: 1px;
    left: 385px;
    top: 470px;
    position: absolute;
}

html文件

<!DOCTYPE html>
<html>
<head>
    <title>界面的展示</title>
    <meta charset="utf-8"/>
    <link href="衣服V1.2.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="衣服1.2.js">
    </script>
</head>
<body>
<div id="smallBox">
    <div id="floatBox"></div>
    <img src="img/衣11.jpg" id="img1">
</div>
<div id="bigBox"><img src="img/衣11.jpg" id="imgBox"></div>
<div id="icon">
    <div id="icon1"><img src="img/衣1.jpg" id="img2" alt="1"></div>
    <div id="icon2"><img src="img/衣2.jpg" id="img3" alt="2"></div>
    <div id="icon3"><img src="img/衣3.jpg" id="img4" alt="3"></div>
    <div id="icon4"><img src="img/衣4.jpg" id="img5" alt="4"></div>
    <div id="icon5"><img src="img/衣5.jpg" id="img6" alt="5"></div>
</div>

</body>
</html>

招商_Simon
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现放大镜效果
qq_48306453的博客
05-12 1076
用到的图片： HTML： <div class="Container"><!-- 父容器 --> <div class="even"></div><!-- 鼠标移入的地方 --> <img src="005.jpg" alt=""><!-- 小图 --> <div class="big"> <img src="005.j.
JavaScript实现放大镜效果
心之所向
08-22 1274
JavaScript实现放大镜效果效果展示HTML部分CSS部分JavaScript部分 在浏览一些购物网站时，我们经常会看到那种鼠标悬浮时，侧边出现放大的细节图的效果。下边是一个简单的图片放大镜效果实现过程。 效果展示 HTML部分 主要分为小图片、遮罩层和大图片；主要注意它们的位置关系。 <body> <div class="preview"> ...
js实现放大镜
weixin_52412707的博客
04-20 411
完整版的html,css,js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
使用js实现放大镜效果案例
03-27
3. `big.js` - 这是JavaScript文件，包含实现放大镜效果的代码。主要任务是监听鼠标移动事件，计算放大区域的位置，并更新放大镜中的显示。 4. `big.css` - CSS文件，负责样式设定，包括图片和放大镜容器的样式，...
JavaScript实现放大镜效果代码示例
10-15
总的来说，JavaScript实现放大镜效果的关键在于正确地处理鼠标移动事件，实时更新放大镜和大图的位置，以及根据小图和大图的比例进行尺寸转换。通过这种方式，我们可以创建一个动态且交互性强的放大镜效果，使得用户...
JS实现放大镜效果
10-14
HTML结构是实现放大镜效果的基础。在这个例子中，我们有两个重要的元素：`#small` 和 `#big`。`#small` 是展示原始图片的较小版本，而 `#big` 是用于显示放大部分的较大版本。此外，还有一个 `#mark` 元素，它是一个...
使用纯javascript实现放大镜效果
10-24
本文给大家分享的是使用纯javascript实现放大镜效果的代码，并附上封装的步骤，做电商程序的小伙伴们一定不要错过。
js实现局部放大镜效果
07-24
仿淘宝局部放大镜效果，可以点击图片来实现局部放大，是商城不错的选择
js放大镜效果
WangYuJiao的博客
08-04 456
html部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>京东商城放大镜效果</title> <!-- 链接css--> <link rel="stylesheet" href="j...
用js实现放大镜效果
justbe_myself的博客
03-15 1146
放大镜效果在电商网站中经常被使用到，下面我们就用js实现来它吧 1.首先我们得先实现放大镜效果所需要的布局和css样式，当然，这里我们用大中小套图来实现放大镜的效果，平时的话一套图也能实现且实现起来更加的简易，下面是css和html的代码： <style> *{ margin: 0;padding: 0; } .box{ ...
放大镜
promis_的博客
12-16 122
CSS样式： <style> * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative;
【JS案例】JS实现图片放大镜功能
最新发布
Ghmin的博客
08-30 3332
原生JS实现图片放大镜效果，详细讲解一步步操作，完整代码
js版放大镜
花花的博客
06-03 674
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;放大镜&lt;/title&gt; &lt;style&gt; *{ padding: 0;
JavaScript面向对象实现放大镜效果
"这篇文档详细介绍了如何使用JavaScript面向对象编程技术来实现一个放大镜效果，主要涉及鼠标事件处理、坐标计算以及CSS样式布局。" 在JavaScript面向对象编程中，实现放大镜功能通常涉及到以下几个关键知识点： 1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值