Xiaobai is not very familiar with js, so I would like to ask, if I use js to click a button, and then p moves to a position of 500px on the right after 5 seconds, what is the idea of making this effect?
Should I write a class first to achieve all these effects, and then use js to switch the className?
But in the click event, write all the css effects? QUQ
PHP中文网2017-06-26 10:56:58
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p
{
width:100px;
height:100px;
background:red;
transition:all 5s;
}
p:hover
{
width:300px;
}
#p1{
position:relative;
width:100px;
height:100px;
}
#p2{
position:absolute;
width:100%;
height:100%;
background:#0f0;
}
#p2.p2{
width:200%;
height:200%;
}
</style>
</head>
<body>
<input type='button' id='btn1'/>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<p></p>
<p id='p1'>
<p id='p2'></p>
</p>
<p>鼠标移动到 p 元素上，查看过渡效果。</p>
</body>
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1"),op=document.getElementById("p2");
oBtn.onclick=function(){
op.className='p2';
}
}
</script>
</html>
I’ll give you a simple demo and you’ll know it. This is just one of the methods, there are many more!
伊谢尔伦2017-06-26 10:56:58
Is this what you want? See the code below. p moves to 500px in 5s. You can set the transition effect for p first and add a class that moves to the right. What js mainly does is to add a class to the element
ps: It’s just a demo code, not considering compatibility, etc...
css3
.demo{
border:1px solid #fff;
width:100px;
height:50px;
position:relative;
left:0;
transition: left 2s;
}
.run{
left:500px;
}<p class="demo">
</p>(function(){
document.getElementsByClassName('demo')[0].onclick = function(){
this.className +=' run';
};
})()
女神的闺蜜爱上我2017-06-26 10:56:58
You can use css or write directly in js. For css, use transition to write it. For Baidu specifically, when a click event occurs, add a class to the element and change the style. For js, use settimeout, take the left margin you mentioned as an example, change the left margin bit by bit, and stop when it reaches the specified value, which is cleartimeout
代言2017-06-26 10:56:58
As mentioned above, if it is ie9 or below, you need to use a timer
var ele = document.getElementsByClassName('demo')[0]
ele.onclick = function(){
var btn = this;
setInterval(function(){
btn.style.left = parseInt(btn.style.left) + 1 + "px"
},1)
}習慣沉默2017-06-26 10:56:58
Usually css3’s transition is used to achieve the transition effect. If you want animation, use animation. Using js is more performance-intensive. Here are some reference articles