实现功能：开始云朵向右侧漂浮，按暂停键停止运动，同时按键显示为播放，按播放键云朵开始运动，同时按键显示为暂停。下面为示例代码，注意js 和 jquery区别。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes move{
0%{
left: 0px;
}
100%{
left:200px;
}
}
@-webkit-keyframes move{
0%{
left: 0px;
}
100%{
left:200px;
}
}
.love{
display: block;
position: relative;
width: 100px;height: 100px;
background: url(img/timg_02.png) 0 0 no-repeat ;
animation:move 3s infinite;
-webkit-animation:move 3s infinite;
}
.stop{
animation-play-state:paused;
}
</style>
</head>
<body>
<i id="testImg" class="love"></i>
<p><input type="button" id="testBtn" value="暂停"></p>
</body>
</html>
<!--js版-->
<script>
window.onload=function(){
var Love=document.getElementById("testImg");
button=document.getElementById("testBtn");
console.log(Love.classList);//["love", value: "love"]
console.log(Love);//<i id="testImg" class="love"></i>
console.log(button.type);//button
if(Love.classList&&Love&&button){
button.onclick=function(){
if(this.value=='暂停'){
Love.classList.add('stop');
this.value='播放';
}else{
Love.classList.remove('stop');
this.value='暂停';
}
}
}
}
</script>
<!--jquery版-->
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var $love=$('#testImg'),$button=$('#testBtn');
console.log($love.get(0).classList);//["love",value:"love"]
console.log($love);//[i#testImg.love]
console.log($button.attr('type'));//button
$button.on('click',function(){
if($love.get(0).classList&&$love&&$button){
if($(this).val()=='暂停'){
$love.addClass('stop');
$(this).val('播放');
}else{
$love.removeClass('stop');
$(this).val('暂停');
}
}
});
});
</script>示例结果：
扫一扫
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
