分享一款基于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实现人物跳动特效的更多相关文章

  1. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  2. 基于jQuery发展历程时间轴特效代码

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="time ...

  3. 基于jQuery悬停图片变色放大特效

    分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width ...

  4. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  5. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

  6. 基于jQuery加入购物车飞入动画特效

    基于jQuery加入购物车飞入动画特效.这是一款电商购物网站常用的把商品加入购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="main& ...

  7. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  8. 8款基于Jquery的WEB前端动画特效

    1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...

  9. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

随机推荐

  1. Linux命令-进程后台执行:nohup(就是不挂起的意思)

    nohup 就是不挂起的意思( no hang up) 用途:LINUX命令用法,不挂断地运行命令. 语法: nohup Command [ Arg ... ] [ & ] 描述:nohup ...

  2. MongoDB Linux环境安装及配置[转]

    CentOS 6.5系统中使用yum安装MongoDB 2.6 教程 CentOS 6.5系统中使用yum安装MongoDB 2.6 教程,本文共分5个步骤完成MongoDB的安装.下面我们在Cent ...

  3. shell将脚本输出结果记录到日志文件

    使用tee命令: sh portal/main.sh |tee log.txt 获取脚本父类路径cmddir="`dirname $0`"

  4. 目标检测 的标注数据 .xml 转为 tfrecord 的格式用于 TensorFlow 训练

    将目标检测 的标注数据 .xml 转为 tfrecord 的格式用于 TensorFlow 训练. import xml.etree.ElementTree as ET import numpy as ...

  5. MIUI 们的发展蓝图:“罪恶”秘密背后的金钱和机遇

    (原文来自 AllThingsD)   听起来有点唬人,但是移动变革的确是这个时代最大的一次技术平台升级事件.这场趋势实在太浩大,不断地循环往复,对于创业者(还有像我这样的投资人来说),则意味着令人激 ...

  6. UI测试后生成测试报告,利用shell脚本上传svn

    ui测试后生成测试报告,把报告保存在某一个固定路径 shell脚本把这个报告上传 #!/bin/bash -ile #svn下载文件 #svn checkout http://svn.xxx.com/ ...

  7. UITableView/UIScrollView 不能响应TouchBegin 的处理 及窥见 hitTest:withEvent:

    重写touchBegin 方法是不行的,在UITableView/UIScrollView 解决方案 重写hitTest:withEvent:  在他们的子类中 - (UIView *)hitTest ...

  8. IOS 视频流

    https://github.com/kolyvan/kxmovie   demo 项目

  9. 处理 ASP.NET 中的异常:无法在发送 HTTP 标头之后进行重定向。

    因为在 Global.asax 中的 Application_Error 事件中添加了统一的错误处理,其中会有 Redirect 重定向到错误页面. 但是有可能有些情况下已经进行过其它重定向操作,所以 ...

  10. MySQL 自定义函数CREATE FUNCTION实例

    分享一个MySQL 自定义函数CREATE FUNCTION的实例.mysql> delimiter $$mysql> CREATE FUNCTION myFunction-> (i ...