基于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横向手风琴图片展示插件.今天要 ...
随机推荐
- http realtime response 基于http的实时响应方式的演进
http http ajax http polling ajax http long-polling ajax html5 server sent events html5 websocket com ...
- FreeSWITCH协议参数之自定义sip header
一.主动发送 1. 加入sip_h_前缀 这样FreeSWITCH就能自动加上后面的扩展头. 2. 示例 <action application="set" data=&qu ...
- ASP.NET 的ClientIDMode属性
在ASP.NET 4.0之前我们总是要为控件的ClientID头疼,比如明明一个叫lblName的Label放在一个叫做grd的GridView里面后,在页面上改Label的ID就变成了诸如grd_c ...
- (面试)Statement和PrepareStatement有什么区别
(1)Statement用于执行静态sql语句,在执行时,必须指定一个事先准备好的sql语句.PrepareStatement是预编译的sql语句对象,sql语句被预编译并保存在对象中.被封装的sql ...
- Python——验证码识别 Pillow + tesseract-ocr
至于安装教程在这里不再重复说了,可以参考博客,网上有大把的教程 https://blog.csdn.net/testcs_dn/article/details/78697730 要是别的验证码是如下类 ...
- java用String类的toUpperCase()和toLowerCase()方法转字符串的大小写
1.如何判断英文字母的大小写: package com.ldw.string; import java.util.Scanner; /** * @author 作者:ldw E-mail: csu.l ...
- svm工具箱快速入手简易教程
首先svm是用来做分类的,是一种有监督的分类器. 什么是有监督的呢?就是说在你给我一个数据集让我做分类之前.我已经有一些经验数据了.即要先进行学习,再进行分类. 这里就有了训练集和测试集.先用训练集来 ...
- laravel路由不生效,404,除了/ 都不行,关于nginx环境下laravel除了默认路由都出现404报错的处理方法
其实出现这个问题只会出现在laravel被部署在二级目录中,其原因是,除了请求根目录/ (http://www.xxx.com/public/),会请求public/index.php 你在浏览器输入 ...
- unity, dll is not allowed to be included or could not be found
player settings change to Net 2.0 ref: http://answers.unity3d.com/questions/485085/dll-is-not-allowe ...
- C# .net WPF无边框移动窗体
转自 http://download.csdn.net/detail/xiang348352/3095084 WPF无边框移动窗体,先在<Window>里添加 MouseLeftButto ...