预览大图

Posted 2020-10-03 jinsuo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了预览大图相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0 ;
        padding: 0;
    }
    body{
        position: relative;
    }
    #tooltip{
        position: absolute;
    }
    ul li a img{
        width: 50px;
    }
    #tooltip img{
        width: 100px;
    }
    </style>
</head>
<body>
    <ul>
        <li><a href="images/hai-01.jpg" class="tooltip" title="苹果 ipod">
            <img src="images/hai-01.jpg" alt="苹果 ipod">
        </a></li>
        <li><a href="images/gu-01.jpg" class="tooltip" title="鸭梨 ipod">
            <img src="images/gu-01.jpg" alt="苹果 ipod">
        </a></li>
    </ul>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(function(){

        var x=10;
        var y=20;
        $(‘a‘).mouseover(function(e){
            this.mytitle=this.title;
            this.title="";
            var imgtitle=this.mytitle?"<br/>"+this.mytitle:"";
            var tooltip="<div id=‘tooltip‘><img src=‘"+this.href+"‘ alt=‘产品预览图‘／>"+imgtitle+"</div>";
            $(‘body‘).append(tooltip);
            $(‘#tooltip‘).css({‘top‘:(e.pageY+y)+‘px‘,‘left‘:(e.pageX+x)+‘px‘}).show("fast")
        }).mouseout(function() {
            this.title=this.mytitle;
            $("#tooltip").remove();
        }).mousemove(function(e) {
            $("#tooltip").css({‘top‘:(e.pageY+y)+‘px‘,‘left‘:(e.pageX+x)+‘px‘})
        });
        

    })
</script>
</html>

以上是关于预览大图的主要内容，如果未能解决你的问题，请参考以下文章

看我如何使用Vue实现图片的上传以及大图预览功能

预览大图

element ui 单独使用大图预览

android 仿头条微信大图预览动画双击缩放保存至相册

片段中的 Android 相机预览

微信公众号点击预览大图。支持滑动，双击放大功能。