基于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横向手风琴图片展示插件.今天要 ...
随机推荐
- 解决线上服务logback 乱码问题
从网上查询资料 获得以下结果 1 设置 project 和file 文件为utf-8 编码 2 设置 logback 文件内容 <appender name="CONSOLE" ...
- 浅谈 .NET 中的对象引用、非托管指针和托管指针 理解C#中的闭包
浅谈 .NET 中的对象引用.非托管指针和托管指针 目录 前言 一.对象引用 二.值传递和引用传递 三.初识托管指针和非托管指针 四.非托管指针 1.非托管指针不能指向对象引用 2.类成员指针 五 ...
- Git Note
Git 参考 http://chengshiwen.com/article/head-first-git/ 文件状态 Git目录: (git directory),亦即Git仓库,一般对应项目根目录下 ...
- 更改Eclipse下Tomcat的部署目录 ,防止上传的文件是到eclipse的克隆的tomcat上的webapp,而不是tomcat本身的webapp
使用eclipse开发是因为机器不够用myeclipse,eclipse也比myeclipse清爽很多,启动速度也快.这里的搭建开发环境使用: Jdk1.6+Tomcat6+Eclipse JEE, ...
- SharePoint 2013 Step by Step——使用自定义的List Template
Overview 对于企业员工来说,"扁平结构"的LIST是日常操作中经常使用到的,LIST的好处是方便数据的录入以及数据的整理分析,尤其是Quick Edit功能,可以实现快速编 ...
- Maven for Eclipse 第二章 ——安装 m2eclipse插件
m2eclipse 是一个提供了 Maven 与 Eclipse 整合的插件.它的意图是桥接上 Maven 和 Eclipse 之间的缺口.通过 Maven 原型提供的简单直白的接口创建项目,它使 M ...
- 缓存机制和Hibernate的缓存机制介绍
缓存是介于应用程序和物理数据源之间,其作用是为了降低应用程序对物理数据源访问的频次,从而提高了应用的运行性能.缓存内的数据是对物理数据源中的数据的复制,应用程序在运行时从缓存读写数据,在特定的时刻或事 ...
- Android下Notification,样式style,主题theme的功能实现
一:Notification 1.NotificationManager nm = (NotificationManager) getSystemService(NOTIFICATION_SERVIC ...
- 转 kafka架构简介
kafka架构 转 http://www.cnblogs.com/chushiyaoyue/p/5612298.html 相关文章: https://www.jianshu.com/p/6233d53 ...
- CentOS下配置redis允许远程连接
1. 目的 因为想要学习redis,因此在虚拟机中安装了redis,为了实现在物理机可以访问redis,弄了好久:因此记录下来,以免忘记. 2. 环境 虚拟机:CentOS Linux release ...