JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

vue实现tab切换的放大镜效果

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue实现tab切换的放大镜效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

废话不多说先看效果图

1.我这里并没有加遮罩层，如有需要请自行加上

2.图片建议使用4k高清图片，不然放大后模糊，影响观看心情

3.不用拘泥于样式，关注实现原理即可

4.可能我的方法并不简便，但是也是一种思路，请大家参考

实现原理

第一肯定需要vue.js

第二需要两张图片

左边为现实图片，右边放大后的效果图其实一直存在，只不过鼠标移入现实，鼠标移出消失

放大的图片并不是真正的放大，而是在img标签外套了一个父元素，将img标签的宽高都设置为百分之一百以上，至于放大多少你就设置多少，然后给父元素设置超出隐藏，再设置display：none让元素隐藏，等到鼠标移入左边大图的时候再显示

至于如何让鼠标移动放大的图片也会移动就是要获取鼠标在元素上移动的位置，用鼠标移动事件触发，然后给放大后的图片设置相对定位然后将鼠标的移动的X轴位置和Y轴位置分别赋值给大图的left和top

-----------------------------------万能分割线----------------------------------------

简单来说，放大后的图片本来就存在只不过设置为隐藏，鼠标移入的后再显示，然后获取鼠标移动的位置赋值给大图的相对定位值，这就是放大镜的实现原理

tab切换就更简单了

需要用到vue的v-show来实现
在data中创建一个数组将图片地址存在数组中，通过v-for将图片地址遍历到img标签中
在data中创建一个nowindex，将图片索引赋值给nowindex通过v-show=“nowindex == index“来控制图片显示隐藏

下面就是代码

<!DOCTYPE htML>
<html lang="en">

<head>
    <;meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inITial-scale=1.0">
    <title>Document</title>
    <script src="./vue/vue.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #ccc;
        }
        
        #app {
            height: 245px;
            width: 556px;
            /* border: 3px solid; */
            position: relative;
            margin: 200px auto;
            box-sizing: border-box;
        }
        
        .content {
            height: 150px;
            width: 250px;
            border-bottom: 5px solid white;
        }
        
        .imgs {
            height: 90px;
            width: 248px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
        }
        
        .imger {
            height: 99%;
            width: 49.6%;
        }
        
        .content>img {
            height: 100%;
            width: 100%;
        }
        
        .active {
            box-shadow: 0px 8px 8px black;
            opacity: 0.7;
        }
        
        .fdj {
            display: none;
        }
        
        .block {
            height: 240px;
            width: 300px;
            position: absolute;
            top: 0px;
            right: -10px;
            overflow: hidden;
            z-index: 100;
            border-radius: 8px;
        }
        
        .block>img {
            height: 600%;
            width: 600%;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="content" @mouseover="over" @mouseout="out" @mouSEMove='move($event)'>
            <img :src=item v-for="(item,index) in url" v-show='index == nowindex'>
        </div>
        <div class="imgs">
            <img :src=item v-for="(item,index) in url" class="imger" @click="change(index)" :class="{active:index == nowindex}">
        </div>
        <div :class="blocks">
            <img :src=item v-for="(item,index) in url" v-show='index == nowindex' :style='positions'>
        </div>
    </div>
    <script>
        VAR vm = new Vue({
            el: "#app",
            data: {
                //图片地址
                url: ['./img/11.jpg', "./img/9.jpg"],
                nowindex: 0,
                blocks: "fdj",
                //相对定位的值
                positions: {
                    top: 0,
                    left: 0
                }
            },
            methods: {
                change(index) {
                    //图片的切换
                    this.nowindex = index;
                },
                over() {
                    //通过更改类名实现显示隐藏
                    this.blocks = "block"
                },

                out() {
                    this.blocks = "fdj"
                },
                move(e) {
                    //将鼠标移动位置赋值给图片相对定位的值，实现鼠标移动图片移动
                    this.positions.top = (e.offsetY * -7.9) + "px";
                    this.positions.left = (e.offsetX * -6) + "px";
                }
            },

        })
    </script>
</body>

</html>

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

@H_360_59@您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的vue实现tab切换的放大镜效果全部内容，希望文章能够帮你解决vue实现tab切换的放大镜效果所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：vue
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程