基于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横向手风琴图片展示插件.今天要 ...
随机推荐
- Linux IO系统分析(scsi篇)
一.概述 Linux内核中SCSI子系统由SCSI上层,中间层,底层驱动模块三部分组成,负责管理SCSI资源和处理其他子系统,如文件系统,提交到SCSI子系统中的IO请求. 因此,理解SCSI子系统的 ...
- PHP中使用 JKS(Java Key Store)的方法
PHP语言无法直接读取 JKS中的密钥,需要通过以下方法进行转换 本例以JKS中的私钥为例 首先 使用 KeyStore Explorer工具,打开JKS文件 ,此时可能需要输入 JKS密码 对私钥进 ...
- jQuery Chosen 使用
jQuery Chosen 使用 1. jQuery Chosen 选择框下拉值重置: 1 2 3 4 //重置 $("#easySelBrands").val(" ...
- mvc 缓存页面 减轻服务器压力
方法: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...
- window.location.href 与 window.loaction.replace区别
window.location.href和window.location.replace的区别 1.window.location.href=“url”:改变url地址: 2.window.locat ...
- struts2:JSON在struts中的应用(JSP页面中将对象转换为JSON字符串提交、JSP页面中获取后台Response返回的JSON对象)
JSON主要创建如下两种数据对象: 由JSON格式字符串创建,转换成JavaScript的Object对象: 由JSON格式字符串创建,转换成JavaScript的List或数组链表对象. 更多关于J ...
- JDK1.6新特性,基础类库篇,IO支持
1. JDK1.6中提供了java.io.Console类 JDK1.6中提供了java.io.Console 类专用来访问基于字符的控制台设备.你的程序如果要与Windows下的cmd或者Linux ...
- android 自己定义视频播放器之2/1
非常久没更新博客,相信大家年后都比較忙. 今天给大家带来了一款视频播放器,首先确认的得有几点. 1.首先得有个播放视频的view. 2.加点额外功能进去左边上下滑动调节亮度,右边上下滑动调节声量: 3 ...
- mongoose的update函数中的回调函数是必须要传的吗
mongoose中的update的回调函数是必须要传的,如果不传,则不会更新. 例如这样写是不会更新的 tagModel.update({name:tagName},{$inc:{total:1}}, ...
- android笔记---ScrollView
<!--在创建xml文件的时候选择ScrollView类型--> <?xml version="1.0" encoding="utf-8"?& ...