update:图片预览图+视频弹窗v1

src/main/java/top/lvzhiqiang/config/WebAppConfig.java

@@ -49,7 +49,7 @@ public class WebAppConfig implements WebMvcConfigurer {
         if (dicCode != null) {
             picPath = dicCode.getCodeValue();
         }
-        registry.addResourceHandler("/image/**").addResourceLocations("file:" + picPath);
+        registry.addResourceHandler("/qibing/**").addResourceLocations("file:" + picPath);
     }
 
     @Bean

src/main/resources/static/css/my.css

@@ -83,7 +83,6 @@ body {
     display: none;
     z-Index: 999;
 }
-
 #cover img {
     position: absolute;
     bottom: 50%;
@@ -100,4 +99,24 @@ body {
     left: 50%;
     transform: translate(-50%, -50%);
 }
+#playvideo {
+    display: none;
+    position: absolute;
+    z-index: 999;
+    margin: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #FFFFFF;
+}
+#bigpreview {
+    display: none;
+    position: absolute;
+    z-index: 999;
+    margin: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #FFFFFF;
+}
 

src/main/resources/static/index.html

@@ -30,7 +30,7 @@
                     <div class="myui-panel__head active bottom-line clearfix">
                         <a class="slideDown-btn more pull-right" href="javascript:">收起 <i
                                 class="fa fa-angle-up"></i></a>
-                        <h3 class="title">电影 </h3>
+                        <h3 class="clearAll title">电影 </h3>
                         <a class="more text-muted" id="shaixuan">筛选</a>
                         <div class="myui-header__search search-box">
                             <a class="search-select dropdown-hover" href="javascript:">
@@ -92,6 +92,8 @@
     </div>
 </div>
 <div id="cover"><img src="cover/loading.gif" style="width: 80px; height: 80px;"/></div>
+<div id="playvideo"><video src="" width="800" height="500" controls></video></div>
+<div id="bigpreview"><img src="" /></div>
 </body>
 </html>
 

src/main/resources/static/js/my.js

@@ -44,8 +44,8 @@ $(function () {
                         var videoInfo = videoInfoList[i];
                         str += "<li class=\"col-lg-8 col-md-6 col-sm-4 col-xs-3\">" +
                             "   <div class=\"myui-vodlist__box\">" +
-                            "<a class=\"myui-vodlist__thumb lazyload\" title=\"\" style=\"background-image: url(&quot;image/" + videoInfo.imgUrl + "&quot;);\">" +
-                            "           <span class=\"play hidden-xs\"></span>" +
+                            "       <a class=\"myui-vodlist__thumb lazyload\" title=\"\" style=\"background-image: url(&quot;qibing/" + videoInfo.imgUrl + "&quot;);\">" +
+                            "           <span class=\"playvideo play hidden-xs\" videoUrl='" + videoInfo.videoUrl + "'></span>" +
                             "           <span class=\"pic-tag pic-tag-top\">" +
                             "               <span class=\"tag\" style=\"background-color: #FB7299;\">" + videoInfo.identificationCode + "</span>" +
                             "               <span class=\"tag\" style=\"background-color: #00C0FF;\">" + videoInfo.issueDate + "</span>" +
@@ -53,7 +53,7 @@ $(function () {
                             "           <span class=\"pic-text text-right\">" + videoInfo.score + "</span>" +
                             "       </a>" +
                             "       <div class=\"myui-vodlist__detail\">" +
-                            "           <h4 class=\"title text-overflow\"><a title=\" " + videoInfo.name + " \">" + videoInfo.name + "</a></h4>" +
+                            "           <h4 class=\"bigpreview title text-overflow\" imgUrl='" + videoInfo.imgUrl + "' ><a title=\" " + videoInfo.name + " \">" + videoInfo.name + "</a></h4>" +
                             "           <p class=\"text text-overflow text-muted hidden-xs\">直属：" + videoInfo.mainWho + "</p>" +
                             "       </div>" +
                             "   </div>" +
@@ -89,6 +89,26 @@ $(function () {
                             search(pageNo);
                         }
                     });
+
+                    $(".playvideo").click(function () {
+                        if ($("#playvideo").css("display") === 'none') {
+                            $("#playvideo").css("display", "block");
+                            $("#playvideo").find("video").attr("src", "qibing/" + $(this).attr("videoUrl"));
+                            $("#playvideo").find("video").prop('muted', true);
+                        } else if ($("#playvideo").css("display") === 'block') {
+                            $("#playvideo").css("display", "none");
+                            $("#playvideo").find("video").attr("src", "");
+                        }
+                    });
+                    $(".bigpreview").click(function () {
+                        if ($("#bigpreview").css("display") === 'none') {
+                            $("#bigpreview").css("display", "block");
+                            $("#bigpreview").find("img").attr("src", "qibing/" + $(this).attr("imgUrl"));
+                        } else if ($("#bigpreview").css("display") === 'block') {
+                            $("#bigpreview").css("display", "none");
+                            $("#bigpreview").find("img").attr("src", "");
+                        }
+                    });
                 }
             } else {
                 alert(data.message);
@@ -131,6 +151,12 @@ $(function () {
     $(".dropdown-hover").mouseout(function () {
         $(".dropdown-box").attr("style", "display: none;");
     });
+    $(".clearAll").click(function (){
+        $("#playvideo").find("video").attr("src", "");
+        $("#bigpreview").find("img").attr("src", "");
+        $("#playvideo").css("display", "none");
+        $("#bigpreview").css("display", "none");
+    });
 });
 
 function search(pageNo) {
@@ -170,8 +196,8 @@ function search(pageNo) {
 
                     str += "<li class=\"col-lg-8 col-md-6 col-sm-4 col-xs-3\">" +
                         "   <div class=\"myui-vodlist__box\">" +
-                        "<a class=\"myui-vodlist__thumb lazyload\" title=\"\" style=\"background-image: url(&quot;image/" + videoInfo.imgUrl + "&quot;);\">" +
-                        "           <span class=\"play hidden-xs\"></span>" +
+                        "       <a class=\"myui-vodlist__thumb lazyload\" title=\"\" style=\"background-image: url(&quot;qibing/" + videoInfo.imgUrl + "&quot;);\">" +
+                        "           <span class=\"playvideo play hidden-xs\" videoUrl='" + videoInfo.videoUrl + "'></span>" +
                         "           <span class=\"pic-tag pic-tag-top\">" +
                         "               <span class=\"tag\" style=\"background-color: #FB7299;\">" + videoInfo.identificationCode + "</span>" +
                         "               <span class=\"tag\" style=\"background-color: #00C0FF;\">" + date + "</span>" +
@@ -179,7 +205,7 @@ function search(pageNo) {
                         "           <span class=\"pic-text text-right\">" + videoInfo.score + "</span>" +
                         "       </a>" +
                         "       <div class=\"myui-vodlist__detail\">" +
-                        "           <h4 class=\"title text-overflow\"><a title=\" " + videoInfo.name + " \">" + videoInfo.name + "</a></h4>" +
+                        "           <h4 class=\"bigpreview title text-overflow\" imgUrl='" + videoInfo.imgUrl + "' ><a title=\" " + videoInfo.name + " \">" + videoInfo.name + "</a></h4>" +
                         "           <p class=\"text text-overflow text-muted hidden-xs\">直属：" + videoInfo.mainWho + "</p>" +
                         "       </div>" +
                         "   </div>" +
@@ -203,6 +229,25 @@ function search(pageNo) {
                         search(pageNo);
                     }
                 });
+
+                $(".playvideo").click(function () {
+                    if ($("#playvideo").css("display") === 'none') {
+                        $("#playvideo").css("display", "block");
+                        $("#playvideo").find("video").attr("src", "qibing/" + $(this).attr("videoUrl"));
+                    } else if ($("#playvideo").css("display") === 'block') {
+                        $("#playvideo").css("display", "none");
+                        $("#playvideo").find("video").attr("src", "");
+                    }
+                });
+                $(".bigpreview").click(function () {
+                    if ($("#bigpreview").css("display") === 'none') {
+                        $("#bigpreview").css("display", "block");
+                        $("#bigpreview").find("img").attr("src", "qibing/" + $(this).attr("imgUrl"));
+                    } else if ($("#bigpreview").css("display") === 'block') {
+                        $("#bigpreview").css("display", "none");
+                        $("#bigpreview").find("img").attr("src", "");
+                    }
+                });
             } else {
                 alert(data.message);
             }