Question

我试图在用户点击链接时显示div。

div首先非常小，然后缩放以适应浏览器屏幕。

到目前为止，我有一些东西。

<a id='btn' href='#' ><img src='test.png' /></a>

CSS

.test1{ 
    position: absolute;
    transition:all 1s ease-in;
    -webkit-transition:all 1s; /* Safari */
}

JS

var contentDiv = document.createElement('div');
var img        = document.createElement('img');

contentDiv.setAttribute('class','test1');

img.src='newimg.png';
contentDiv.appendChild(img);

$("#btn").on('click', function(e){
   $('body').append(contentDiv)
   var setW = $(contentDiv).width()/2
   var setH = $(contentDiv).height()/2
   var xPos = e.pageX - setW
   var yPos = e.pageY - setH
   $(contentDiv).css('transform', 'scale(.1)') //first very small
   $(contentDiv).css({top: yPos, left: xPos, 'transform': 'scale(2)'}) //second fit the screen
})

我不知道如何创建一个较小的div然后缩放以适应窗口。任何人都可以帮我吗？非常感谢！

Answer 1

您可以将div的高度和宽度增加到100％，而不是使用缩放。为您创建的示例here

Answer 2

或者，您可以使用css过渡来实现相同的目的：

HTML

<div class="wrapper">
    <div class="overlay"></div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    background: #294059;
}
.overlay {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 0px; /* This can be... */
    width: 0px; /* ...any size you want */
    background: #562906;
}
.overlay.active {
    height: 100%;
    width: 100%;
    -webkit-transition: all 1s;
}

的jQuery

$('.wrapper').on('click', function() {
    $('.overlay').toggleClass('active'); //Alternatively, add a dedicated 'close' button that removes the class
});

这显然是一个非常基本的实现，但可以扩展基本概念以满足您的需求。此外，使用CSS转换的优点是，您可以将jQuery的逻辑减少到覆盖容器上的类的添加/删除，并避免注入内联样式。

这是Fiddle

如何缩放元素以适应屏幕

2 个答案: