From d73bc3a0319d119cf26ec17d6c91c0431f13d267 Mon Sep 17 00:00:00 2001
From: duanmuxiangxiao <1210893441@qq.com>
Date: Mon, 26 Mar 2018 13:36:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E8=BD=AE=E6=92=AD=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E7=89=87=E5=88=87=E6=8D=A2=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/resources/web/picture.ftl        | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/jodconverter-web/src/main/resources/web/picture.ftl b/jodconverter-web/src/main/resources/web/picture.ftl
index 47da16ca..7241730f 100644
--- a/jodconverter-web/src/main/resources/web/picture.ftl
+++ b/jodconverter-web/src/main/resources/web/picture.ftl
@@ -24,6 +24,40 @@
        navbar:false
     });
     document.getElementById("${currentUrl}").click();
+    // 修改下一页按钮的样式和位置
+    $(function () {
+        var outHandler = function(){
+            $(this).css('background-color','rgba(0, 0, 0, 0)');
+        };
+        var overHandler = function(){
+            $(this).css('background-color','rgba(0, 0, 0, .5)');
+        };
+        var next = $("li[data-action=next]");
+        var prev = $("li[data-action=prev]");
+        var viewerToolBar = $(".viewer-footer");
+        // 覆盖按钮父类原始样式
+        viewerToolBar.css("overflow", "visible");
+        // 获取文档高度、宽度
+        var clientHeight = document.body.clientHeight;
+        var clientWidth = document.body.clientWidth;
+        // 调整样式
+        var styleCss = {},nextCss={},prevCss={};
+        styleCss.position = "absolute";
+        styleCss.top = -clientHeight + 52;
+        styleCss.width = clientWidth*0.1;
+        styleCss.height = clientHeight;
+        // 覆盖原始样式
+        styleCss.backgroundColor='rgba(0, 0, 0, 0)';
+        styleCss.borderRadius='inherit';
+        nextCss.right = "0";
+        prevCss.left = "0";
+        next.css($.extend(nextCss, styleCss));
+        prev.css($.extend(prevCss, styleCss));
+        next.on('mouseout',outHandler);
+        next.on('mouseover',overHandler);
+        prev.on('mouseout',outHandler);
+        prev.on('mouseover',overHandler);
+    });
 </script>
 </body>