技术思绪摘录旅行笔记
应用场景中,很多时候需要预览大图,但是显示的时候由于UI设计限制,只能是显示缩略图,由此我们产生了新的体验,鼠标放上去预览大图。

少废话先看东西

image.png

开源是程序员的基本美德


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>看大图</title>
</head>
<body>
<div style="text-align: center;">
    <img src="https://www.yangshaofeng.com/Upload/Ueditor/Image/20180822/6367056239157893525787598.jpg"
         style="width: 20px;" onmouseover="showbig(this,'倩女幽魂')"/>
    <img src="https://www.yangshaofeng.com/Upload/Ueditor/Image/20180822/6367056220810169583908632.jpg"
         style="width: 20px;" onmouseover="showbig(this,'倩女幽魂')"/>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
    var showbig = function (a, title) {
        var e = $(a);
        var trigger = "hover";
        var place = "bottom";
        var image = e.attr("src");
        if (image == "" || image == null || image == undefined) {
            return;
        }
        var x = 0;
        var y = 0;
        var w = 300;
        var h = 300;
        var html = "";
        var detail = "";
        if (image != null) {
            detail = detail + '<img   src="' + image + '" style="max-width:' + w + 'px;height:' + h + 'px;" />'
        }
        if (title != null && title != "") {
            if (detail != null && detail != "") {
                detail = '<p style="padding:0px 0px 10px 0px;margin:0px;"><strong>' + title + "</strong></p>" + detail
            }
            e.attr("title", "")
        }
        detail = '<div style="width: '+w+'px">' + detail + "</div>";
        html = $(detail);
        $("body").append(html);
        if (place == "" || place == null) {
            place = "top";
        }
        if (place == "left") {
            x = e.offset().left - html.outerWidth() - 5;
            y = e.offset().top - html.outerHeight() / 2 + e.outerHeight() / 2;
        } else {
            if (place == "top") {
                x = e.offset().left - html.outerWidth() / 2 + e.outerWidth() / 2;
                y = e.offset().top - html.outerHeight() - 5;
            } else {
                if (place == "right") {
                    x = e.offset().left + e.outerWidth() + 5;
                    y = e.offset().top - html.outerHeight() / 2 + e.outerHeight() / 2;
                } else {
                    if (place == "bottom") {
                        x = e.offset().left - html.outerWidth() / 2 + e.outerWidth() / 2;
                        y = e.offset().top + e.outerHeight() + 5;
                        console.log(x + ":" + y);
                    }
                }
            }
        }
        html.css({
            "left": x + "px",
            "top": y + "px",
            "position": "fixed",
            "background": "#fff",
            "padding": "10px",
            "text-align": "center",
            "box-sizing": "content-box",
            "box-shadow": "0px 3px 20px #f1f1f1"
        });
        if (trigger == "hover" || trigger == "click" || trigger == null) {
            e.mouseout(function () {
                html.remove();
                e.attr("title", title)
            })
        }
    }
</script>
</body>
</html>


CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

站点统计

总文章数:275 总分类数:18 总评论数:88 总浏览数:124.92万

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫