简单动态启停图 js jquery css3

实现功能：开始云朵向右侧漂浮，按暂停键停止运动，同时按键显示为播放，按播放键云朵开始运动，同时按键显示为暂停。下面为示例代码，注意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);//buttonif(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>

示例结果：

简单动态启停图 js jquery css3相关推荐

动态毛玻璃特效html,js和CSS3炫酷毛玻璃面板特效
Frosted Panel 是一款使用js编写的炫酷毛玻璃特效插件.您通过简单的配置,既可以生成非常炫酷的半透明模糊的毛玻璃效果. 使用方法在HTML文件中引入. HTML结构创建HTML结构并使 ...
基于quartz的定时任务动态启停实现分析（人人平台为例）
配置文件位置在 module/job/config/ScheduleConfig @Configuration public class ScheduleConfig {@Beanpublic Sc ...
js,jquery,css,html5特效
js,jquery,css,html5特效包含js,jquery,css,html5特效,源代码本文地址:http://www.cnblogs.com/Jeremy2001/p/6089343.h ...
spring schedule 配置多任务动态 cron 【增删启停】
一.背景之前公司经常会遇到配置定时任务,简单的任务可以直接依赖spring. 简单任务直接使用 @scheduled 注解配合@EnableScheduling. 但是如何实现简单的动态cron呢? ...
分享8款简单大气的jQuery/CSS3图片特效
自从jQuery问世以后,网页上就流行很多漂亮的图片效果,像淡入淡出或者焦点图等,但是,现在jQuery结合CSS3,我们可以打造更美观更实用的图片特效.下面分享8款简单而又大气的jQuery/CSS ...
Web端点餐系统（HTML5 + CSS3 + JS(jQuery)）
Web点餐系统(前端开发) 一.系统简介二.系统设计三.系统实现 · 首页(当天菜品)/推荐菜品/热买菜品 · 已选菜品 · 我的订单 · 订单统计四.总结五.源码下载一.系统简介该Web ...
Spring Boot实现定时任务的动态增删启停
欢迎关注方志朋的博客,回复"666"获面试宝典作者 | jessehua 来源 | https://www.jianshu.com/p/0f68936393fd 在spring ...
Spring Boot 实现定时任务的动态增删启停
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章来源:jianshu.com/p/0f68936393fd 添加执 ...
@scheduled cron动态修改_spring boot实现动态增删启停定时任务
作者:jessehua 来源:https://www.jianshu.com/p/0f68936393fd 在spring boot项目中,可以通过@EnableScheduling注解和@Sched ...

简单动态启停图 js jquery css3

简单动态启停图 js jquery css3相关推荐

最新文章

热门文章