- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Neuling ist mit js nicht sehr vertraut, also sagen Sie mir bitte, wenn ich js verwende, um auf eine Schaltfläche zu klicken, und p sich dann nach 5 Sekunden zu einer Position von 500 Pixeln auf der rechten Seite bewegt, was ist die Idee dahinter? Wirkung?
Sollten wir zuerst eine Klasse schreiben, um all diese Effekte zu erzielen, und dann js verwenden, um den Klassennamen zu ändern?
Aber im Click-Event alle CSS-Effekte schreiben? 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>
给你个简单的demo看完就会了，这也只是方法中的一种，方法还有很多！
伊谢尔伦2017-06-26 10:56:58
你要的是这样么？代码见下方， p 5s移动到500px，可以先给p设置好transition效果，加个移动到右边的class, js主要做的就是给元素加个class
ps: 只是demo代码，没考虑兼容等等情况……
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
可以用css，也可以直接用js写。css的话就用transition写，具体的百度，点击事件发生时为元素添加一个class，改变样式。js的话就用settimeout，以你说的左边距为例，一点一点改变左边距，到达指定值时停止即cleartimeout
代言2017-06-26 10:56:58
如楼上所说,如果是ie9以下,需要使用定时器做
var ele = document.getElementsByClassName('demo')[0]
ele.onclick = function(){
var btn = this;
setInterval(function(){
btn.style.left = parseInt(btn.style.left) + 1 + "px"
},1)
}