图片预览说明功能

最新推荐文章于 2021-12-10 19:06:59 发布

Alasdair_lu

最新推荐文章于 2021-12-10 19:06:59 发布

阅读量229

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_42736725/article/details/107077029

版权

实现功能：类似一个模板。用户点击一个按钮，之后会出现图片，图片里的内容是指当前的功能说明。
点击按键弹出分享说明图片，背景用黑色半透明效果。
实现思路：
百度的图片放大方法，原图片隐藏。点击后显示图片。

<html>
    <head>
        <style>
            .over {position: fixed; left:0; top:0; width:100%; z-index:100;}
            .tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
        </style>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>
    <body>
        <div class="over"></div><!--背景层-->
        <div class="logoImg amplifyImg"><!--注意：此处的amlifyImg不可少-->
            <img src="preview.png" style="display: none;"/><!-- 此处是引入图片的路径 -->
        </div>
        <input type="button" value="点击测试" id="preview">
        <script>
            $(document).ready(function () {                          
                     $("#preview").click(function(){
                        //$('.amplifyImg img').css("display","block");
                            var currImg = $('.amplifyImg img');
                            coverLayer(1);
                            var tempContainer = $('<div class=tempContainer></div>');//图片容器
                            with(tempContainer){//width方法等同于$(this)
                                appendTo("body");
                                var windowWidth=$(window).width();
                                var windowHeight=$(window).height();
                                //获取图片原始宽度、高度
                                var orignImg = new Image();
                                orignImg.src =currImg.attr("src") ;
                                var currImgWidth= orignImg.width;
                                var currImgHeight = orignImg.height;
                                if(currImgWidth<windowWidth){//为了让图片不失真，当图片宽度较小的时候，保留原图
                                    if(currImgHeight<windowHeight){
                                        var topHeight=(windowHeight-currImgHeight)/2;
                                        if(topHeight>35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
                                            topHeight=topHeight-35;
                                            css('top',topHeight);
                                        }else{
                                            css('top',0);
                                        }
                                        html('<img border=0 src=' + currImg.attr('src') + '>');
                                    }else{
                                        css('top',0);
                                        html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
                                    }
                                }else{
                                    var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
                                    if(currImgChangeHeight<windowHeight){
                                        var topHeight=(windowHeight-currImgChangeHeight)/2;
                                        if(topHeight>35){
                                            topHeight=topHeight-35;
                                            css('top',topHeight);
                                        }else{
                                            css('top',0);
                                        }
                                        html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');
                                    }else{
                                        css('top',0);
                                        html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');
                                    }
                                }
                            }
                            tempContainer.click(function(){
                                $('.amplifyImg img').hide();
                                $(".tempContainer").remove();
                                coverLayer(0);
                            });
                        });
                      
                //使用禁用蒙层效果
                function coverLayer(tag){
                    with($('.over')){
                        if(tag==1){
                            css('height',$(document).height());
                            css('display','block');
                            css('opacity',1);
                            css("background-color","#FFFFFF");
                            css("background-color","rgba(0,0,0,0.7)" );  //蒙层透明度
                        }
                        else{
                            css('display','none');
                        }
                    }
                }
            });
        </script>
    </body>
</html>

不大会，不足之处，请各位大佬多多指正。最好提供怎么实现的方法。

Alasdair_lu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片预览说明功能

实现功能：类似一个模板。用户点击一个按钮，之后会出现图片，图片里的内容是指当前的功能说明。点击按键弹出分享说明图片，背景用黑色半透明效果。实现思路：百度的图片放大方法，原图片隐藏。点击后显示图片。<html> <head> <style> .over {position: fixed; left:0; top:0; width:100%; z-index:100;} .tempCont
复制链接

扫一扫