Javascript JS/Jquery中动态图像大小更改_Javascript_Jquery_Html_Css_Image

Javascript JS/Jquery中动态图像大小更改

javascript jquery html css image

Javascript JS/Jquery中动态图像大小更改,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,因此，我正在创建一个图像显示脚本，其作用类似于覆盖。我基本上希望将图像大小输入到动画方法中，以便保持适当的图像比例。我使用preventDefault获取href，并将URL输入到HTML中的imgsrc中。我是否应该每次动态创建一个新的img，然后使用动态创建的图像读取图像的大小，然后在加载方法中设置动画？我不知道怎么继续。代码如下： <!doctype html> <html> <head> <title></ti

因此，我正在创建一个图像显示脚本，其作用类似于覆盖。我基本上希望将图像大小输入到动画方法中，以便保持适当的图像比例。我使用preventDefault获取href，并将URL输入到HTML中的imgsrc中。我是否应该每次动态创建一个新的img，然后使用动态创建的图像读取图像的大小，然后在加载方法中设置动画？我不知道怎么继续。代码如下：

<!doctype html>
<html>
    <head>
        <title></title>


    </head>
    <style>
        body {
            background-color: white;
            color: black;
            margin: 0;
            padding: 0;

        }

        .overlayIt {
            color: red;
            text-decoration: none;
        }
        .overlayIt:HOVER {
            color: black;
        }

        #frameIt {
            display: none;
            position: relative;
            z-index: 101;
            width: 0px;
            height: 0px;
            color: black;
            overflow: hidden;
            opacity: 1;
            border: 1px solid white;
            background-color: #000;
            color: white;
            text-align: center;
            margin-top: -65px;
            margin-left: auto;
            margin-right: auto;
        }
        #pageOverLay {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            height: 1000px;
            width: 100%;
            background-color: black;
            opacity: 0;
        }

    </style>
    <body>
    <A href="bullets.jpg" class="overlayIt">CLICK</a><br/>
    <A href="blah.jpg" class="overlayIt">CLICK</a>


    <P/><P/><P/>
    THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT<br>
        THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT<br>

    THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT<br>

    THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT<br>


    <div id="pageOverLay"> </div>

        <img id="frameIt">



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        var link;
        var overlayToggle = false;

        function openOverlay() { 
                    $('#frameIt').attr('src',link);
                    $('#pageOverLay').css('z-index','100').animate({opacity: 0.8}, 500, function() {
                        $('#frameIt').css('display','block').animate({height: 500}, 300, function() {
                            $('#frameIt').animate({width: 500}, 500);
                        });
                    });
                    overlayToggle = true;
                };


        function closeOverlay() {
                    $('#pageOverLay').animate({opacity: 0.0}, 500, function() {
                    $('#frameIt').animate({width: 0}, 300, function() {
                        $('#pageOverLay').css('z-index','-1');$('#frameIt').css('display','none').css('height','0');
                        });
                    });
                    overlayToggle = false;
        };
        $(function() {
            $('.overlayIt').on('click',function(e) {
                e.preventDefault();
                link = $(this).attr('href');
                openOverlay();
            });
            $('#frameIt').on('click',function() {
                closeOverlay();
            });

            $(document).keyup(function(e) {
                if(e.keyCode == 27 && overlayToggle)
                    closeOverlay();

            });
        });
    </script>
    </body>
</html>


身体{
背景色：白色；
颜色：黑色；
保证金：0；
填充：0；
}
.overlayIt{
颜色：红色；
文字装饰：无；
}
.overlayIt:悬停{
颜色：黑色；
}
#框架{
显示：无；
位置：相对位置；
z指数：101；
宽度：0px；
高度：0px；
颜色：黑色；
溢出：隐藏；
不透明度：1；
边框：1px纯白；
背景色：#000；
颜色：白色；
文本对齐：居中；
利润上限：-65px；
左边距：自动；
右边距：自动；
}
#页面覆盖{
位置：绝对位置；
排名：0；
左：0；
z指数：-1；
高度：1000px；
宽度：100%；
背景色：黑色；
不透明度：0；
}



这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本

这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本

这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本

这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本

var-link；
var overlayToggle=false；
函数openOverlay（）{
$（'#frameIt'）.attr（'src'，link）；
$（#pageOverLay'）.css（'z-index'，'100'）。动画（{opacity:0.8}，500，function（）{
$（'#frameIt'）.css（'display'，'block'）.animate（{height:500}，300，function（）{
$（#frameIt'）。设置动画（{width:500}，500）；
});
});
overlytoggle=true；
};
函数closeOverlay（）{
$（'#pageOverLay'）。动画（{opacity:0.0}，500，function（）{
$（'#frameIt'）。设置动画（{width:0}，300，function（）{
$（'#pageOverLay'）.css（'z-index'，'-1'）；$（'#frameIt'）.css（'display'，'none'）.css（'height'，'0'）；
});
});
重叠切换=错误；
};
$（函数（）{
$（'.overlayIt'）。在（'click'，函数（e）上{
e、 预防默认值（）；
link=$（this.attr（'href'）；
openOverlay（）；
});
$（'#frameIt'）。在（'click'，function（）上{
closeOverlay（）；
});
$（文档）.keyup（函数（e）{
if（e.keyCode==27&&overlytoggle）
closeOverlay（）；
});
});

我这样解决了我的问题：

我动态地添加了图像，然后像这样检查它的尺寸-

var imag = $('<img style="max-width: 90%;">');

                    $(imag).attr('src',link);
                    $(imag).load(function() {
                        wdth = this.width;
                        hght = this.height;
                    });

var imag=$（'
我之前尝试此操作的主要问题是$（this）和$（imag）无法在加载函数中返回正确的维度。我必须使用非jquery this关键字。奇怪的行为