隐藏图片魔术

制作思路：

　　1. 在组件中插入图片；

　　2.创建一个控制图片是否显示的变量；

　　3.设置图片消除后的背景；

　　4.设计一个change方法改变变量，用@click调用这个方法；

　　5.循环插入图片组件。

第一步：创建一个新的web项目，引入vue.js文件，利用ps将图片分割成10*10，导入img的文件下，在vue里面新建图片路径（图片名用excel表格拉取）

第二步：创建组件，创建show和v-show变量来控制图片是否显示，设置change方法改变变量show，用@click调用此方法。

第三步：用盒子包裹图片，通过css设置图片隐藏后的背景颜色。

第四步：优化代码。为方便图片插入，利用v-for循环插入标签，通过props声明使用父组件的数据，通过v-bind变量im动态绑定img，接收遍历arrayimg数组中的值。

最终效果如图：

完整代码展示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js"></script> 
        <style>
            #app{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                width: 1100px;
                height: 800px;
            }
            .item{
                width: 104px;
                height: 104px;
                background-color: darkslategray;
            }
        </style>
        <noscript></noscript>
    </head>
    <body>
        <div id="app">
            <!-- <Dong></Dong> -->
            <long v-for = "img in arrayimg" v-bind:im="img"></long>
            <!-- 动态绑定im=img -->
        </div>
        

    </body>
    
    <template id="around">
        <div class="item" @click="change">
            <!-- @click不能写图片上面 -->
            <img :src="im" v-show="show" />
            <!-- ：为解析字符串 -->
        </div>
    </template>
    
    
    <script type="text/javascript">
        Vue.component("long",{
            template:"#around",
            // 连接组件
            props:["im"],
            // 声明要使用父组件的数据
            data:function(){
                return{
                    // 让每个组件的内容互不影响
                    show:true,
                }
            },
            methods:{
                change:function(){
                    this.show = !this.show
                    // 改变show的值，取反
                }
            }
            
        });
        
        var vm = new Vue({
            el:"#app",
            // /作用范围
            data:{
                arrayimg:["img/1 (1).gif",    "img/1 (2).gif",    "img/1 (3).gif",    "img/1 (4).gif",    "img/1 (5).gif",    "img/1 (6).gif",    "img/1 (7).gif",    "img/1 (8).gif",    "img/1 (9).gif",    "img/1 (10).gif",    "img/1 (11).gif",    "img/1 (12).gif",    "img/1 (13).gif",    "img/1 (14).gif",    "img/1 (15).gif",    "img/1 (16).gif",    "img/1 (17).gif",    "img/1 (18).gif",    "img/1 (19).gif",    "img/1 (20).gif",    "img/1 (21).gif",    "img/1 (22).gif",    "img/1 (23).gif",    "img/1 (24).gif",    "img/1 (25).gif",    "img/1 (26).gif",    "img/1 (27).gif",    "img/1 (28).gif",    "img/1 (29).gif",    "img/1 (30).gif",    "img/1 (31).gif",    "img/1 (32).gif",    "img/1 (33).gif",    "img/1 (34).gif",    "img/1 (35).gif",    "img/1 (36).gif",    "img/1 (37).gif",    "img/1 (38).gif",    "img/1 (39).gif",    "img/1 (40).gif",    "img/1 (41).gif",    "img/1 (42).gif",    "img/1 (43).gif",    "img/1 (44).gif",    "img/1 (45).gif",    "img/1 (46).gif",    "img/1 (47).gif",    "img/1 (48).gif",    "img/1 (49).gif",    "img/1 (50).gif",    "img/1 (51).gif",    "img/1 (52).gif",    "img/1 (53).gif",    "img/1 (54).gif",    "img/1 (55).gif",    "img/1 (56).gif",    "img/1 (57).gif",    "img/1 (58).gif",    "img/1 (59).gif",    "img/1 (60).gif",    "img/1 (61).gif",    "img/1 (62).gif",    "img/1 (63).gif",    "img/1 (64).gif",    "img/1 (65).gif",    "img/1 (66).gif",    "img/1 (67).gif",    "img/1 (68).gif",    "img/1 (69).gif",    "img/1 (70).gif",    "img/1 (71).gif",    "img/1 (72).gif",    "img/1 (73).gif",    "img/1 (74).gif",    "img/1 (75).gif",    "img/1 (76).gif",    "img/1 (77).gif",    "img/1 (78).gif",    "img/1 (79).gif",    "img/1 (80).gif",    "img/1 (81).gif",    "img/1 (82).gif",    "img/1 (83).gif",    "img/1 (84).gif",    "img/1 (85).gif",    "img/1 (86).gif",    "img/1 (87).gif",    "img/1 (88).gif",    "img/1 (89).gif",    "img/1 (90).gif",    "img/1 (91).gif",    "img/1 (92).gif",    "img/1 (93).gif",    "img/1 (94).gif",    "img/1 (95).gif",    "img/1 (96).gif",    "img/1 (97).gif",    "img/1 (98).gif",    "img/1 (99).gif",    "img/1 (100).gif",


                ]
            }
        });
    </script>
</html>

插件链接：https://pan.baidu.com/s/1wjHKhL23K61ove5Xd8-GQQ?pwd=zzx3
提取码：zzx3
--来自百度网盘超级会员V2的分享

posted @ 2023-03-18 14:46 鸟儿不拉屎大王阅读(107) 评论(1) 收藏举报

刷新页面返回顶部

letter7

隐藏图片魔术

公告