js实现放大镜效果

最新推荐文章于 2022-11-02 19:35:12 发布
最新推荐文章于 2022-11-02 19:35:12 发布
阅读量51 收藏
点赞数
文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a86669/article/details/120652278
版权

HTML CSS JavaScript 交互设计 图片预览
关键词由CSDN通过智能技术生成

<!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">

    <title>Document</title>

</head>

<style>

.bkk{

    width:2000px;

    height:1400px;

    border: bisque 2px solid;

   

   

}

.imgess {width:400px;

    height:500px;

    border: bisque 2px solid;

    left: 100px;

   

     position: relative;

}

    .imgess img{width:400px;

    height:500px;

    display: block;

   float: left;

    }

   .zz{width:120px;

    display: none;

    height:240px;

    background-color: rgb(172, 235, 110,.4);

    position: absolute;

    float: left;


 

    }

    .imgess .big{

        top:-500px;

        left: 800px;

        width:800px;

        height:700px;

    float: left;

    position: relative;

    border: olive 2px solid;

    overflow: hidden;

    display: block;

       

    }

    .imgess .big img{

        width: 1000px;

        height: 900px;

        position: absolute;

    }

</style>

<body>

    <div class="bkk">

        <div class="imgess">

            <div class="zz"></div>

            <img src="image.html\888.jpg" alt=""> <div class="big"><img src="image.html\888.jpg" alt=""></div>

        </div>

            </div>

    </div>

    <script>

        var imgess=document.querySelector('.imgess');

        var zz=document.querySelector('.zz');

        var big=document.querySelector('.big');

        var bigm=document.querySelector('.big').querySelector('img');

        imgess.addEventListener('mouseover',function(){

           zz.style.display='block';

           big.style.display='block';

        })

        imgess.addEventListener('mouseout',function(){

           big.style.display='none';

           zz.style.display='none';

        })

        imgess.addEventListener('mousemove',function(e){

            var x=e.pageX - this.offsetLeft;

            var y=e.pageY - this.offsetTop;

            var  zzx = x - zz.offsetWidth/2 ;

            var zzy = y - zz.offsetHeight/2 ;

           var smaxx=imgess.offsetWidth-zz.offsetWidth;

           var smaxy=imgess.offsetHeight-zz.offsetHeight;

            if( zzx <=0)  zzx=0;

            if( zzx >=smaxx) zzx=  smaxx;

            if( zzy <=0)  zzy=0;

            if(zzy >=smaxy) zzy= smaxy;

            zz.style.left= zzx + 'px';

            zz.style.top=zzy + 'px';

            var bmaxx=big.offsetWidth-bigm.offsetWidth;

            var bamxy=big.offsetHeight-bigm.offsetHeight;

            var bigx=zzx*smaxx/bmaxx;

            var bigy=zzy*smaxy/bamxy;

            bigm.style.left= bigx + 'px';

            bigm.style.top= bigy + 'px';

        })

       

    </script>

</body>

</html>

打代码挣钱加仓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用js实现图片在页面自定义进行上,下,左,右的移动
G18239715095的博客
10-16 557
使用js实现图片在页面自定义进行上,下,左,右的移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p&...
js特效-跟随鼠标的小红心
qq_41670147的博客
11-30 974
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
图标跟随鼠标
cnicfhnui的博客
03-31 3455
创建一个影片剪辑图标，实例名称输入：cursor_mc 新图层1，脚本 新图层2，影片剪辑图标 新图层3，背景 图层1帧1，脚本 Mouse.hide();//隐藏鼠标指针 stage.addEventListener(MouseEvent.MOUSE_MOVE, moveThatMouse);//舞台添加鼠标移动事件监听函数 function mov
JS 网页中通过js控制图片的左右上下移动
happy20110802的专栏
01-05 1293
<!-- function Fleft() { var x1=document.getElementById("img1").style.left; var x=eval(Number(x1.substring(0,x1.length-2))-20); document.getElementById("img1").style.left=x+"px"; } function F
利用JavaScript创建随机数与随机图片
weixin_34087307的博客
03-24 227
创建随机数①自JavaScript产生后，好多浏览器中都有内置的随机数发生方法。例如：varnumber=Math.random();该方法产生一个0到1之间的浮点数。②基于时间，亦可以产生随机数。例如：varnow=newDate();varnumber=now.getSeconds();这将产生一个基于...
JavaScript实现放大镜效果代码示例
10-15
总的来说，JavaScript实现放大镜效果的关键在于正确地处理鼠标移动事件，实时更新放大镜和大图的位置，以及根据小图和大图的比例进行尺寸转换。通过这种方式，我们可以创建一个动态且交互性强的放大镜效果，使得用户...
原生js实现放大镜效果
10-20
通过原生JavaScript实现放大镜效果，开发者可以更深入地理解事件监听器、DOM操作以及CSS布局，这有助于提升处理类似问题的能力。同时，原生js不依赖于外部库，使得代码更为轻量，执行效率更高，也更易于在不同的环境...
JS实现放大镜效果
10-14
HTML结构是实现放大镜效果的基础。在这个例子中，我们有两个重要的元素：`#small` 和 `#big`。`#small` 是展示原始图片的较小版本，而 `#big` 是用于显示放大部分的较大版本。此外，还有一个 `#mark` 元素，它是一个...
JavaScript实现放大镜效果
09-11
在网页设计中，提供良好的用户体验是至关重要的，其中一种方式就是通过实现放大镜效果来增强商品图片的查看体验。本文将详细介绍如何使用JavaScript和HTML5技术来创建三种不同的放大镜效果：圆形放大镜、直接矩形...
用js实现放大镜效果
01-18
本文实例为大家分享了js实现放大镜效果的具体代码，供大家参考，具体内容如下 该放大区域用背景图片放大 <!DOCTYPE html> <html lang=zh> <head> <meta charset=UTF-8> <meta name=...
图片循环自动播放js
10-23
新建一个html文件和div层用于需要显示的地方，引入该脚本可自动播放图片，具有播放 暂停功能。
JavaScript随机图片显示
07-27
NULL 博文链接：https://shanshandaocao-163-com.iteye.com/blog/752765
可以循环播放图片的js脚步
07-06
这是一个调理清晰的javascript代码，用来展示图片循环播放代码，下载后需要指定播放的图片，然后用浏览器就可以播放了！
js实现键盘控制图片的移动
07-26
function test(id){ alert(id); } if(typeof GetControlundefined) GetControl=function (id) { return document.getElementById(id); }; function KeyDown() { var control=document.getElementById("dSquare"); var key; try{ key=event.keyCode; //取得键盘Code编号 } catch(a){ //对于Firefox来说，不支持event.keyCode key=KeyDown.arguments[0].keyCode; } switch(key) { case 40://40 down if(parseInt(control.style.top)<=100){ control.style.top=(parseInt(control.style.top)+1)+'px'; }else{alert('不可以再前行啦')} break; case 39://39 right control.style.left=(parseInt(control.style.left)+1)+'px'; break; case 38://38 up control.style.top=(parseInt(control.style.top)-1)+'px'; break; case 37://37 left control.style.left=(parseInt(control.style.left)-1)+'px'; break; } } document.onkeydown=KeyDown; //附加事件 document.onkeypress=KeyDown; //附加事件
使用js实现放大镜效果案例
03-27
3. `big.js` - 这是JavaScript文件，包含实现放大镜效果的代码。主要任务是监听鼠标移动事件，计算放大区域的位置，并更新放大镜中的显示。 4. `big.css` - CSS文件，负责样式设定，包括图片和放大镜容器的样式，...
网页图片(图标)鼠标跟随小案例分享
tajia220的博客
07-10 346
http模块: 插入一张图片 <imgsrc="images/xxx.gif"alt=""> css模块: 给图片添加绝对定位 img{ position:absolute; } JavaScript模块: <imgsrc="images/xxx.gif"alt=""> <script> varpic=document.querySelector('...
js 每隔1秒钟切换一张图片
最新发布
lcxdawn的博客
11-02 510
需要把图片名字统一成1，2，3，4。
JS上下左右键盘控制图片移动
qq_36401980的博客
04-18 5860
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;图片移动&lt;/title&gt;&lt;/head&g
JavaScript按上下左右键实现图片在网页上的移动
weixin_47982238的博客
08-06 982
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> img{ cursor: pointer; position: absolute; } </style> </h.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值