Question

如何添加值50而不将左侧属性设置为50？

document.getElementById("myDiv").style.left = "50px";

我正在尝试为我的图片滑块获得平滑的动画效果。

Answer 1

您可以解析该值并为其添加一些值。

document.getElementById("myDiv").style.left = 
    (parseInt(document.getElementById("myDiv").style.left, 10) + 50) + 'px';

Answer 2

如果我正确理解了这个问题，那么这是一个纯粹的CSS解决方案。

＆＃13;

.slide {
 animation-name: slide;
 animation-iteration-count: 1;
 animation-duration: 5s; /* or: Xms */
 animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */	
margin-left:50px;  
}
@keyframes slide {
  0%   { opacity: 0;position:relative;margin-left:-100% }
  5%   { opacity: 0;position:relative;margin-left:0 }
  100% { opacity: 1;position:relative;margin-left:50px; }
}

＆＃13;

<div class="slide">this is a slowly sliding div</div>

＆＃13;

您可以在按钮点击操作中使用javascript添加具有所需动画效果的类，例如：

document.getElementById("myButton").addEventListener( 'click' ,   function(e) {
   e.preventDefault();
   document.getElementById("myDiv").classList.add("slide");
});

就像下面的代码段一样

＆＃13;

document.getElementById("myDiv").classList.add("slide");

＆＃13;

.slide {
 animation-name: slide;
 animation-iteration-count: 1;
 animation-duration: 5s; /* or: Xms */
 animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */	
margin-left:50px;  
}
@keyframes slide {
  0%   { opacity: 0;position:relative;margin-left:-100% }
  5%   { opacity: 0;position:relative;margin-left:0 }
  100% { opacity: 1;position:relative;margin-left:50px; }
}

＆＃13;

<div id="myDiv">this is a slowly sliding div</div>

＆＃13;

如何添加值而不是设置值

2 个答案: