JavaWeb连接图片实现翻牌实践

最新推荐文章于 2023-10-26 11:32:08 发布

伏笔未续

最新推荐文章于 2023-10-26 11:32:08 发布

阅读量135

点赞数

文章标签： java 开发语言 idea html5 css3

本文链接：https://blog.csdn.net/2301_77083521/article/details/131777182

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/vue/vue.min.js"></script>
<style>
       .f{
            display: flex;
            justify-content: space-around;
       }
       .f>div{
           width: 300px;
           height: 350px;
           cursor: pointer;
           background-size: 300px 350px;
           margin-left: 30px;
       }
       .f>div:nth-child(odd){
           background-color: lightgreen;
       }
       .f>div:nth-child(even){
           background-color: lightcoral;
       }
       @keyframes xz {
           0%{
               transform: rotateY(0deg);
               background-image: url("");
           }100%{
           transform:rotateY(180deg);
                       }
       }
       @keyframes xzr {
           0% {
               transform: rotateY(180deg);
           }
           100% {
               transform: rotateY(0deg);
               background-image: url("");
           }
       }
           .xz{
               animation: xz 1s linear 1 forwards;
           }
           .xzr{
               animation: xzr 1s linear 1 forwards;
           }
       /*
        .z1,.z2,.z3{
            width: 400px;
            height: 450px;
            position: absolute;
        }
        .z1{
            top: 25px;
            left: 20px;
            background-color: aqua;
        }
        .z2{
            top: 25px;
            left: 500px;
            background-color: lightcoral;
        }
        .z3{
            top: 25px;
            left: 980px;
            background-color: lightgreen;
        }
        */
        
</style>
</head>
<body>
     <!--  点击按钮实现图片切换
        <img src="/randomImgC" alt="" width="400" height="450"><br>
        <button οnclick="location.reload()">换一个</button>
        -->
<!--
     <div class="f">
         <div class="z1" id="img1" οnclick="changeImage1()">
             <img id="Image1"  alt="" width="400" height="450">
         </div>
         <div class="z2" id="img2" οnclick="changeImage2()">
             <img id="Image2"  alt="" width="400" height="450">
         </div>
         <div class="z3" id="img3" οnclick="changeImage3()">
             <img id="Image3"  alt="" width="400" height="450">
         </div>

     </div>
-->
     <div id="app">
         <button οnclick="location.assign('/home.html')">进入后宫，观看佳丽三千</button>
         <div class="f">
             <div v-for="i in 6" @click="xzImg($event,i)"></div>
         </div>
         <hr>
         <img src="/randomImgC" alt="" width="400" height="450"><br>
         <button οnclick="location.reload()">换一个</button>
     </div>
</body>
<script>
    /*
    let img1 = document.getElementById('img1');
    function changeImage1() {
        let Image1 = document.getElementById("Image1");
        Image1.src = "/randomImgC";
    }
    let img2 = document.getElementById('img2');
    function changeImage2() {
        let Image2 = document.getElementById("Image2");
        Image2.src = "/randomImgC";
    }
    let img3 = document.getElementById('img3');
    function changeImage3() {
        let Image3 = document.getElementById("Image3");
        Image3.src = "/randomImgC";
    }
    */
    new Vue({
        el:'#app',
        data:{
            //记录每个图片被点击的次数
            arr:[0,0,0,0,0,0]
        },
        methods:{
            xzImg(e,i){
            if(this.arr[i-1]%2){//1
                e.target.style.backgroundImage='url()'
                e.target.className='xzr'
                console.log('xzr')
               }else{//0
                e.target.style.backgroundImage='url(/randomImgC?'+i+')'
                e.target.className='xz'
                console.log('xz')
               }
            console.log(e.target,i,this.arr)
                this.arr[i-1]++
            }
        }
    })
</script>
</html>

实现效果：

将图片路径添加后，将会出现如下的几个隔行变色的方框，方框内将会显示你的图片路径对应的图片，这里我将图片路径进行了修改，所以没有显示图片（点击进行图片的旋转）。下面那一块就是一个一JavaWeb随机变换图片的效果

伏笔未续

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb连接图片实现翻牌实践

button onclick="location.assign('/home.html')">进入后宫，观看佳丽三千</button>的值是"getAllImgNames"，则会获取指定目录下的所有图片文件名，并将文件名数组转换成JSON格式的响应。我将图片路径进行了修改，所以没有显示图片（点击进行图片的旋转）。的值是"getImgByName"，则会根据图片名称获取对应的图片数据，并将图片数据作为响应输出。将图片路径添加后，将会出现如下的几个隔行变色的方框，方框内将会显示你的图片路径对应的图片，这里。
复制链接

扫一扫