基于jQuery+CSS3实现人物跳动特效
分享一款基于jQuery+CSS3实现人物跳动特效。这是一款类似gif图片效果的CSS3动画特效代码。效果图如下:
实现的代码。
html代码:
- <div class="charector-wrap " id="js_wrap">
- <div class="charector">
- </div>
- </div>
- <a class="run-xfast" href="#none">最快</a> <a class="run-fast" href="#none">快</a>
- <a class="run-normal" href="#none">正常</a> <a class="run-slow" href="#none">慢</a>
- <button class="btn-paused">
- 暂停</button>
- <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $("a").on("click", function (e) {
- $("#js_wrap").find(".charector-wrap").removeClass("paused");
- $("#js_wrap").attr("class", "charector-wrap " + $(e.target).attr("class").split("-")[1])
- })
- $(".btn-paused").click(function () {
- $("#js_wrap").addClass("paused");
- })
- })
- </script>
via:http://www.w2bc.com/Article/38336
基于jQuery+CSS3实现人物跳动特效的更多相关文章
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- 基于jQuery发展历程时间轴特效代码
分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="time ...
- 基于jQuery悬停图片变色放大特效
分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div style="width ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
- 基于jQuery图片弹出翻转特效代码
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代 ...
- 基于jQuery加入购物车飞入动画特效
基于jQuery加入购物车飞入动画特效.这是一款电商购物网站常用的把商品加入购物车代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="main& ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 8款基于Jquery的WEB前端动画特效
1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...
- 10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
随机推荐
- Android Studio 2.3 正式版新功能,你不来看看?!
2017.3.3 Google老大发布了Android Studio 2.3正式版. 在许多2.3beta版本的基础上修复了bug然后推出了正式版.提供了一些新特性,和对部分已有功能的修改完善. Bu ...
- Git管理工具对比(GitBash、EGit、SourceTree)(转载)
Git管理工具对比(GitBash.EGit.SourceTree) GitBash是采用命令行的方式对版本进行管理,功能最为灵活强大,但是由于需要手动输入希望修改的文件名,所以相对繁琐. EGit是 ...
- Happy Java:定义泛型参数的方法
在平时写代码时,可以自定义泛型类.当使用同一类型的对象时,这是非常有用的,但在实例化类之前,我们不知道它将是哪种类型. 下面让我们定义一个使用泛型参数的方法.首先,在定义一个类用到泛型时,必须使用特殊 ...
- TCP网络编程杂谈
作为一名IT工程师,网络通信编程相信都会接触到,比如Web开发的HTTP库,Java中的Netty,或者C/C++中的Libevent,Libev等第三方通信库,甚至是直接使用Socket API,但 ...
- HttpWebRequest、HttpWebResponse、HttpClient、WebClient等http网络访问类的使用示例汇总
工作中长期需要用到通过HTTP调用API以及文件上传下载,积累了不少经验,现在将各种不同方式进行一个汇总. 首先是HttpWebRequest: /// <summary> /// 向服务 ...
- Android下的联网下载的操作
一:从网络下载图片 MainActivity: NetService 1.由路径获取Url 2.使用url打开HttpURLConnection连接 3.根据路径查找本地sd卡是否有缓存文件,如果文件 ...
- [转]Java中Runtime.exec的一些事
0 预备知识 1 不正确的调用exitValue 2不正确的调用waitFor 3 一种可接受的调用方式 4 调用认为是可执行程序的时候容易发生的错误 5 window执行的良好示例 6 不良好的重定 ...
- sqlserver常用调优脚本
------------------------最耗时的sql--------------------------------------- DECLARE @n INT; ; WITH cte1 A ...
- django缓存基于类的视图
引子: 有些场景下由于数据库中的数据很长时间内都不会发生变化,如果每次调用view都要去查询一次数据库的话,明显是多做了一些无用 工的:django中可以通过装饰器方便的实现view的缓存. 为什么c ...
- Windows平台JDK安装
原文链接:http://android.eoe.cn/topic/android_sdk 下载Java的开发包JDK JDK有好几个类型版本,我们只需要选择Java SE类型的版本就行了.进入网页:h ...