- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
我这个点击document弹出图片他会抖动，不知道是怎么回事？
要是把外层的sdf去了他又是正常的，要怎么改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.sdf{
width:500px;
height:500px;
overflow:hidden;
margin:200px auto;
position:relative;
}
.outter{
width:174px;
height:155px;
position:absolute;
top:100px;
left:200px;
transition:all 1s ease;
}
.dd{
background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
overflow:hidden;
background-size:174px 155px;
background-position:center center;
transition:all 1s ease;
width:0px;
height:155px;
margin:0 auto;
}
</style>
</head>
<body>
<p class="sdf">
<img class="lazy" src="http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg" src="http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg" width="100%" alt="" style="display: inline;">
<p class="outter">
<p class='dd'></p>
</p>
</p>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function() {
$(document).on('click', function() {
$(".dd").css({
'width':'174px'
})
});
});
</script>
</body>
</html>
阿神2017-04-17 11:34:49
[doge]
这根本没有涉及 css3 好不，你就是单纯的改变一个p的宽度，p的宽度原来占据的位置是0，你通过js来改变它的宽度，就会触发浏览器的重绘。
建议是使用 transform:scale(0); 缩放元素，点击之后在还原 transform:scale(1);，这样就不会触发浏览器的重绘了。
迷茫2017-04-17 11:34:49
受1楼启发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.sdf{
width:500px;
height:500px;
overflow:hidden;
margin:200px auto;
position:relative;
}
.outter{
width:174px;
height:155px;
position:absolute;
top:100px;
left:200px;
transition:all 1s ease;
}
.dd{
background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
overflow:hidden;
background-size:174px 155px;
background-position:center center;
transition:all 1s ease;
transform: scale(0,1);
width:174px;
height:155px;
margin:0 auto;
}
</style>
</head>
<body>
<p class="sdf">
<img class="lazy" src="http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg" src="http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg" width="100%" alt="" style="display: inline;">
<p class="outter">
<p class='dd'></p>
</p>
</p>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function() {
$(document).on('click', function() {
$(".dd").css('transform', 'scale(1, 1)');
});
});
</script>
</body>
</html>
ringa_lee2017-04-17 11:34:49
你把width缩小就是缩小一下，跟抖动并没有什么关系啊。。说起来我理解的抖动不应该是做一个animation,先向左transport再向右？