Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

新增图片点击放大 #2

Closed
wensaus opened this issue Dec 25, 2018 · 3 comments
Closed

新增图片点击放大 #2

wensaus opened this issue Dec 25, 2018 · 3 comments

Comments

@wensaus
Copy link

wensaus commented Dec 25, 2018

STYLESHEET_TMPL 块增加样式
  div#gray {
            background: black;
            opacity: 0.55;
            filter: alpha(opacity=55);
            position: absolute;
            top: 0px;
            left: 0px;
        }
SCRIPT_JS 块新增js
<script>
    function show(pic) {
        iw = pic.width;
        ih = pic.height;
        sw = document.documentElement.clientWidth;
        sh = document.documentElement.clientHeight;
        gdiv = document.createElement('div');
        gdiv.id = 'gray';
        gdiv.style.height = sh + 'px';
        gdiv.style.width = sw + 'px';
        document.body.appendChild(gdiv);
        gdiv.onclick = function () {
            document.body.removeChild(this);
            document.body.removeChild(oimg);
        }
        oimg = document.createElement('img');
        oimg.src = pic.src;
        oimg.width = 800;
        oimg.height = 800;
        oimg.style.position = 'absolute';
        oimg.style.top = (sh - ih) / 8 + 'px';
        oimg.style.left = (sw - ih) / 4 + 'px';
        document.body.appendChild(oimg);
    }
    window.onresize = function () {
        sh = document.documentElement.clientHeight;
        sw = document.documentElement.clientWidth;
        gdiv.style.width = sw + 'px';
        gdiv.style.height = sh + 'px';
        oimg.style.top = (sh - ih) / 2 + 'px';
        oimg.style.left = (sw - iw) / 2 + 'px';
    }
REPORT_IMAGE 块修改样式
<img class="small_img" src="%(screenshot)s"  onclick="show(this)"/>
@wensaus
Copy link
Author

wensaus commented Dec 25, 2018

itest_1

@wishchen
Copy link
Owner

点击截图放大后根据屏幕大小做判断展示,再点击大图可以消失 最好了,调好了一块整上去吧。

@wensaus
Copy link
Author

wensaus commented Dec 25, 2018

优化后,重新上传

@wensaus wensaus closed this as completed Dec 25, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants