7 html css jquery css3 css-transforms
我的目标是每次单击按钮时translate沿"X"轴的方框100px.我通过temp在jQuery中使用变量以某种方式使它成为可能.有没有其他任何方法可以通过CSS实现这样,当单击按钮时,框应该translate 100px从当前位置？
var temp = 100;
$(document).ready(function(){
$('#b1').click(function(){
$('#box-one').css("transform","translate("+temp+"px, 0px)");
temp = temp + 100;
});
});#box-one
{
background-color: blue;
height: 100px;
width: 100px;
transition: all 0.3s ease;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="box-one"></div>
<button id="b1">Move</button>
</body>
</html>这是一个纯 CSS 方法，尽管它有点疯狂。
根据需要添加更多输入（以及关联的 CSS）：
html, body {
margin: 0;
padding: 0;
}
#box-one {
background-color: blue;
height: 100px;
width: 100px;
transition: all 0.3s ease;
}
input[type=checkbox] {
position: absolute;
opacity: 0;
transform: scaleX(7) scaleY(2);
top: 100px;
}
input:first-of-type {z-index: 1;}
input:checked {display: none;}
input:checked + input {z-index: 1}
input:checked:nth-child(1) ~ #box-one {transform: translateX(100px);}
input:checked:nth-child(2) ~ #box-one {transform: translateX(200px);}
input:checked:nth-child(3) ~ #box-one {transform: translateX(300px);}
input:checked:nth-child(4) ~ #box-one {transform: translateX(400px);}
input:checked:nth-child(5) ~ #box-one {transform: translateX(500px);}
input:checked:nth-child(6) ~ #box-one {transform: translateX(600px);}
input:checked:nth-child(7) ~ #box-one {transform: translateX(700px);}
input:checked:nth-child(8) ~ #box-one {transform: translateX(800px);}
input:checked:nth-child(9) ~ #box-one {transform: translateX(900px);}
input:checked:nth-child(10) ~ #box-one {transform: translateX(1000px);}<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
<div id="box-one"></div>
<button>Move</button>