我怎样才能增加价值没有设定值

如何添加一个值为50而不是将左侧的属性设置为50？我怎样才能增加价值没有设定值

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

我想为我的图片滑块获得流畅的动画效果。

来源

2016-11-28 Milan Koyš

为什么不使用CSS动画或（如果您的兼容性需求非常好）使用一些现有的JS动画库？ – Richard

嗯，我对js来说很新，我想尝试一下，但是它会做我想。只有我需要的是通过点击一个按钮标签添加一个值的HTML属性。所以，如果我点击它将广告“左”属性50px。 –

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

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

来源

2016-11-28 15:28:15

我想我必须在这里得到更多的朋友:)你的回答是正确的，但缺乏“流畅的动画”部分。 –

如果我理解正确的问题，那么这是一个纯粹的CSS溶液。

.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) */ \t 
 
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; } 
 
}

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

您可以添加具有您要使用JavaScript上，例如点击一个按钮动作动画效果的一类：在片段

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

像下面

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

.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) */ \t 
 
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; } 
 
}

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

来源

2016-11-28 15:33:52

我怎样才能增加价值没有设定值

回答

相关问题