我的页面上有一系列div。 每个div 都有一个背景图像,并以网格形式排列。 我的页面上有很多div。使用<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
将页面限制为一定大小
我希望能够单击一个div,使其缩放到特定比例和中心。
我的标记:
<body id="body">
<div id="container" style="position: relative">
<div id="pack1" class="screenItem cardPack"></div>
<div id="pack2" class="screenItem cardPack"></div>
<div id="pack3" class="screenItem cardPack"></div>
<div id="pack4" class="screenItem cardPack"></div>
</div>
</body>
我的 CSS:
#pack1{
margin-left: 20px;
margin-top: 20px;
height: 193px;
width: 127px;
background-image: url(../images/image1.png);
background-size: 100% 100%;
float: left;
clear: both;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#pack2{
margin-right: 20px;
margin-top: 20px;
height: 193px;
width: 127px;
background-image: url(../images/image2.png);
background-size: 100% 100%;
float: right;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#pack3{
margin-left: 20px;
margin-top: 20px;
height: 193px;
width: 127px;
background-image: url(../images/image3.png);
background-size: 100% 100%;
float: left;
clear: both;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#pack4{
margin-right: 20px;
margin-top: 20px;
height: 193px;
width: 127px;
background-image: url(../images/comingSoon.png);
background-size: 100% 100%;
float: right;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#body,
.ui-page {
background-image: url(../images/bg.png);
background-size: auto 100%;
background-repeat: repeat-x;
}
#container {
margin: auto;
width: 310px;
height: 568px;
}
我有一个几乎有效的软糖:
$(cardPack).click(function() {
var left = $(cardPack).position().left;
var top = $(cardPack).position().top;
$(cardPack).css("-webkit-transform", "scale(2.5,2.5)");
$(cardPack).css("-webkit-transform-origin", (3*(left/4)) + " " + (3*(top/4)));
});
但我认为这更像是巧合和运气。 我的大脑没有工作到我可以计算出在哪里设置transform-origin
以便图像最终位于屏幕中央的程度,无论其起点如何。
我很乐意考虑transform-origin
的替代方案来实现这一目标。
编辑:一个"与本地行为不太一样"的jsfiddle:http://jsfiddle.net/a7Cks/9/
只是为了好玩,因为我们谈论的是 CSS3,所以有纯粹的 CSS 解决方案,使用 target:
选择器 http://codepen.io/dmi3y/full/keAds,它从初始数据中清理了一点
.HTML
<div id="container">
<a href="#pack1" id="pack1" class="screenItem cardPack"></a>
<a href="#pack2" id="pack2" class="screenItem cardPack"></a>
<a href="#pack3" id="pack3" class="screenItem cardPack"></a>
<a href="#pack4" id="pack4" class="screenItem cardPack"></a>
</div>
少
#pack1{
margin-left: 20px;
margin-top: 20px;
float: left;
clear: both;
&:target {
top: 105px; left: 75px;
margin-left: 0;
margin-top: 0;
}
}
#pack2{
margin-right: 20px;
margin-top: 20px;
float: right;
&:target {
top: 105px; left: -75px;
margin-right: 0;
margin-top: 0;
}
}
#pack3{
margin-left: 20px;
margin-top: 20px;
float: left;
clear: both;
&:target {
top: -105px; left: 75px;
margin-left: 0;
margin-top: 0;
}
}
#pack4{
margin-right: 20px;
margin-top: 20px;
float: right;
&:target {
top: -105px; left: -75px;
margin-right: 0;
margin-top: 0;
}
}
#container {
position: relative;
margin: auto;
width: 310px;
height: 568px;
}
.screenItem {
background: green;
position: relative;
height: 193px;
width: 127px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
:target {
background: red;
z-index: 100;
padding: 10px; // + 20 px dimensions
}
我的好先生,你来了。
有一个错误,如果您在动画运行时继续单击,它将再次出现。但我认为这是一个很好的方法。
使用动画:
$(cardPack).animate({
width: '50%',
height: '50%',
}, 700, function() {
$(cardPack).animate({
left: (contwidth - width * 1.5) / 2,
top: (contheight - (height+height/2) * 1.5) / 2
}, 300);
});
http://jsfiddle.net/a7Cks/11/
添加了height/2
,使其居中到对象中间而不是对象顶部。
另一点是使用位置:绝对能够定位元素。css 中的位置:静态是多余的。