JavaScript仿京东放大镜效果

2024-10-03 13:17:22

本文实例为大家分享了JavaScript实现京东放大镜效果的具体代码，供大家参考，具体内容如下

案例分析

整个案例可以分为三个功能模块
鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
黄色的遮挡层跟随鼠标功能。
移动黄色遮挡层，大图片跟随移动功能。
鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
就是显示与隐藏

移动黄色遮挡层，大图片跟随移动功能，大图片的移动距离要跟黄色遮挡层的比例相等。
求大图片的移动距离公式

代码

<!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>
    <style>
        .preview_wrap {
            width: 400px;
            height: 400px;
        }

        .preview_img {
            position: relative;
            height: 398px;
            border: 1px solid #ccc;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background: #FEDE4F;
            opacity: .5;
            border: 1px solid #ccc;
            cursor: move;
        }

        .big {
            display: none;
            position: absolute;
            left: 410px;
            top: 0;
            width: 500px;
            height: 500px;
            background-color: pink;
            z-index: 999;
            border: 1px solid #ccc;
            overflow: hidden;
        }

  /* 要给图片加了绝对定位，才可以设置 left top */
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="preview_wrap">
        <div class="preview_img">
            <img src="images/s3.png" alt="">
            <div class="mask"></div>
            <div class="big">
                <img src="images/big.jpg" alt="" class="bigImg">
            </div>
        </div>
    </div>
    <script>
     var preview_img = document.querySelector('.preview_img');
     var mask = document.querySelector('.mask');
     var big = document.querySelector('.big');
     // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
     preview_img.addEventListener('mouseover', function() {
         mask.style.display = 'block';
         big.style.display = 'block';
     })
     preview_img.addEventListener('mouseout', function() {
             mask.style.display = 'none';
             big.style.display = 'none';
         })
         // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
     preview_img.addEventListener('mousemove', function(e) {
         // (1). 先计算出鼠标在盒子内的坐标
         var x = e.pageX - this.offsetLeft;
         var y = e.pageY - this.offsetTop;
         // console.log(x, y);
         // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
         // (3) 我们mask 移动的距离
         var maskX = x - mask.offsetWidth / 2;
         var maskY = y - mask.offsetHeight / 2;
         // (4) 如果x 坐标小于了0 就让他停在0 的位置
         // 遮挡层的最大移动距离
         var maskMax = preview_img.offsetWidth - mask.offsetWidth;
         if (maskX <= 0) {
             maskX = 0;
         } else if (maskX >= maskMax) {
             maskX = maskMax;
         }
         if (maskY <= 0) {
             maskY = 0;
         } else if (maskY >= maskMax) {
             maskY = maskMax;
         }
         mask.style.left = maskX + 'px';
         mask.style.top = maskY + 'px';
         // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
         // 大图
         var bigIMg = document.querySelector('.bigImg');
         // 大图片最大移动距离
         var bigMax = bigIMg.offsetWidth - big.offsetWidth;
         // 大图片的移动距离 X Y
         var bigX = maskX * bigMax / maskMax;
         var bigY = maskY * bigMax / maskMax;
         bigIMg.style.left = bigX + 'px';
         bigIMg.style.top = bigY + 'px';

     })
    </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript实现放大镜详细

目录 1.效果图 2.实现原理 3.总结 1.效果图 2.实现原理借助宽高等比例放大的两张图片,结合js中鼠标偏移量.元素偏移量.元素自身宽高等属性完成:左侧遮罩移动Xpx,右侧大图移动X*倍数px:其余部分就是用小学数学算一下就OK了. HTML和CSS: <divclass="wrap">  <div id="small"> <img src="img/1.jpg" al
javaScript实现放大镜特效

要实现的效果:鼠标放到小图片上小图片上方会出现一个小块,这个小块里面的区域会放大显示到右边大图里面(如下图所示) 这个效果主要用到的是:鼠标的坐标e.clientX,e.clientY,偏移量offsetLeft,offsetTop,offsetWidth,sffsetHeight等属性. HTML和CSS代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&
Javascript实例项目放大镜特效的实现流程

目录前言案例:仿京东放大镜效果 offset系列 client系列 scroll系列三大系列总结前言本票博客主要是放大镜案例,里面涉及到的知识点会提出来,可放心食用~后有源代码. 案例:仿京东放大镜效果效果见下图: 功能要求: 当鼠标移动到小图片上时,遮罩层出现,同时旁边大图片也出现,鼠标移出,遮罩层消失,大图片也消失. 遮罩层只能在小盒内子移动,不能超出. 遮罩层在小盒子内移动,大图片显示对应的板块. 案例分析: 元素的隐层和显示遮罩层的移动范围用offset计算计算出大盒子内
JavaScript仿京东放大镜特效

本文实例为大家分享了JavaScript仿京东放大镜的具体代码,供大家参考,具体内容如下功能需求: 1.分为三个模块 2.鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开隐藏两个盒子功能 3.黄色的遮挡层跟随着鼠标移动 4.移动黄色遮挡层,大图片跟随着移动大图片移动距离=(遮挡层移动距离*大图片最大移动距离)/ 遮挡层最大移动距离 <style> body, div { margin: 0; padding: 0; } .product { position: relative; w
JavaScript实现放大镜效果

本文实例为大家分享了JavaScript实现放大镜效果的具体代码,供大家参考,具体内容如下这次实现的效果如下: 这次的案例稍微有一点难度,在css和js上都需要多加思考,话不多说,让我们来开始吧~ 1.首先我们需要使用html和css规划好整体的布局,即两个相邻的盒子A和B,左边的盒子A中还有一个小盒子S.为了实现相邻,我采用的方法是为其均设置position:absolute ,然后设置left和top的值来使其相邻. 小盒子S我们同样可以为其设置position:absolute,调整一下
JavaScript面向对象实现放大镜案例

本文实例为大家分享了JavaScript面向对象实现放大镜的具体代码,供大家参考,具体内容如下效果图实现原理分析如图所示触发鼠标的移动事件时,根据事件对象的 clientX 和 clientY 属性得到实时的坐标点 x 和 y 值 ,减去 small_box 的 offsetLeft 值和 cutting_box 的宽度的一半 ,可以得到 cutting_box 的偏移量 left 值,top值同理.当 cutting_box 到达右侧和下侧时,left 和 top 取得最大值.用实
JavaScript仿淘宝放大镜效果

本文实例为大家分享了JavaScript实现淘宝放大镜效果的具体代码,供大家参考,具体内容如下 html代码 <div class="thumbnail"> <img src="./img/12-1Z930152149 (2).jpg" alt=""> <div class="magnifier"></div> </div> <div class="o
js实现放大镜效果的思路与代码

本文实例为大家分享了js实现放大镜效果的具体代码,供大家参考,具体内容如下样式展示: 思路先准备两张图片,一张小图,一张大图,并且两张图片有一个整数比值在小图片的上方设置一个放大镜样式,背景设为透明色即可大图片外边套一个父元素,超出父元素隐藏,大小为只能容纳你的放大部分即可父元素与放大镜样式的比值=大图与小图的比值在小图片上进行鼠标移动时获取鼠标的坐标,得到鼠标当前处于小图片上的坐标根据对应的比例求出大图片的坐标并移动大图片令放大部分处于父元素可见范围代码 1.html部分 <d
JavaScript仿京东放大镜效果

本文实例为大家分享了JavaScript实现京东放大镜效果的具体代码,供大家参考,具体内容如下案例分析整个案例可以分为三个功能模块鼠标经过小图片盒子, 黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能黄色的遮挡层跟随鼠标功能. 移动黄色遮挡层,大图片跟随移动功能. 鼠标经过小图片盒子, 黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能就是显示与隐藏移动黄色遮挡层,大图片跟随移动功能,大图片的移动距离要跟黄色遮挡层的比例相等. 求大图片的移动距离公式代码 <!DOCTYP
利用JavaScript实现仿京东放大镜效果

功能实现 1.鼠标经过小图片盒子,黄色的遮挡层和大图片显示,离开时就隐藏2个盒子功能 2.黄色遮挡层跟着鼠标走把鼠标的坐标给盒子,不断地进行赋值操作把鼠标地坐标给遮挡层不合适,因为遮挡层坐标以父盒子为准首先是获得鼠标在盒子内地坐标然后把数值给遮挡层地left和top值此时用到鼠标移动事件,但是还是在小图片盒子内移动发现,遮挡层位置不对,需要再减去盒子自身高度和宽度地一半遮挡层不能超出小图片盒子范围如果小于0,就把坐标设置为0 如果大于遮挡层最大地移动距离,就把坐标设置为最大地移动
js仿京东放大镜效果

本文实例为大家分享了js仿京东放大镜效果的具体代码,供大家参考,具体内容如下 1.效果1:鼠标经过前 2.效果2:鼠标放上去,弹出右边放大镜 3.效果3:鼠标在小盒子移动,放大镜跟着移动 4.源代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q
JavaScript实现京东放大镜效果

本文实例为大家分享了JavaScript实现京东放大镜展示的具体代码,供大家参考,具体内容如下实现效果: 1.鼠标放到图片上显示放大镜和详细图,鼠标离开时什么都不显示(效果消失) 2.鼠标一直在放大镜的中间,且放大镜随鼠标移动 3.放大镜不能出缩列图的盒子 4.鼠标放在详细图上详细图消失实现细节: 1.大盒子虽然比详细图的盒子宽度小,但是在逻辑上详细图的盒子属于大盒子 2.详细图不能使用浮动,因为盒子下面一般会有文字内容 3.以父盒子来定位详细图的盒子 4.放大镜鼠标选中为十字形 5
Javascript仿京东放大镜的效果

随便找一个图片吧.小伙伴们,想怎么玩就怎么玩(注意路径),亲自测试,绝对没问题. 话不多说,请看代码: <html> <head> <meta charset="utf-8"> <style type="text/css"> body,div{margin: 0; padding: 0;} #zhuti{ margin:50px; position: relative; } #small{ width: 300px;
js仿京东放大镜

本文实例为大家分享了js仿京东放大镜的具体代码,供大家参考,具体内容如下 1.实现效果: 移动遮挡框,右边的图片响应的放大并移动. 2.实现思路: (1)鼠标移动到图片上,遮罩层和右边盒子显示.鼠标移出,遮罩层和右边盒子消失. (2)黄色遮罩层跟随鼠标移动 (3)右边图片跟随左边图片移动注意:右边图片的移动方向与左边遮罩层的移动方向相反,因此,右边图片移动距离是负的. 右边大盒子:多余的图片不显示,用overflow:hidden.来隐藏 3.代码展示 <!DOCTYPE html> <
JavaScript仿微博输入框效果(案例分析)

这篇文章给大家分享一个小的JavaScript的案例,就是模仿微博输入框的效果. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿微博输入框效果</title> <script src="jquery.js"></script> </h
Android使用Scroll+Fragment仿京东分类效果

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下实现思路:首先说下布局,整个是一个横向的线性布局,左边是一个ScrollView,右边是一个FrameLayout,在代码中动态向ScrollView中添加TextView,然后根据TextView的点击事件使用Fragment替换FrameLayout 首先看下布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andr
Android仿京东分类效果

本文实例为大家分享了Android仿京东分类效果展示的具体代码,供大家参考,具体内容如下 1.写一个fragment import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;

JavaScript仿京东放大镜效果

案例分析

代码

相关推荐

随机推荐