html5点击展开动画效果,jquery展开收缩扑克牌动画效果教程
Baraja是一个很有趣的jQuery插件。它允许你像在桌子上摊开扑克牌一样将元素展开和收缩。它使用CSS transforms来旋转和translate这些元素。它使用几个可用参数来控制各种不同的展开效果,比如横向移动扑克牌并像开扇子一样旋转它们。
注意:不是每一个浏览器都支持CSS transforms和transitions。
HTML结构:
要使用jquery.Baraja插件,必须使用一个无序列表,并给它一个classbaraja-container。
-
Coco Loko
Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.
调用插件:
$( '#baraja-el' ).baraja();
下面是一个使用了参数的例子:
$( '#some-button' ).on( 'click', function( event ) {
baraja.fan( {
speed : 500,
easing : 'ease-out',
range : 90,
direction : 'right',
origin : { x : 25, y : 100 },
center : true,
translation : 0
} );
} );
可选参数
下面列出了可用的默认参数:
$.Baraja.defaults = {
// if we want to specify a selector that triggers the next() function. example: '#baraja-nav-next'
nextEl : '',
// if we want to specify a selector that triggers the previous() function
prevEl : '',
// default transition speed
speed : 300,
// default transition easing
easing : 'ease-in-out'
};
可用的方法有:fan(), next(), previous(), close(), add()
将扑克牌设置为扇形的方法如下:
this.fanSettings = {
// speed for opening/closing
speed : 500,
// easing for opening/closing
easing : 'ease-out',
// difference/range of possible angles that the items will have
// example: with range:90 and center:false the first item
// will have 0deg and the last one 90deg;
// if center:true, then the first one will have 45deg
// and the last one -45deg; in both cases the difference is 90deg
range : 90,
// this defines the position of the first item
// (to the right, to the left)
// and its angle (clockwise / counterclockwise)
direction : 'right',
// transform origin:
// you can also pass a minX and maxX, meaning the left value
// will vary between minX and maxX
origin : { x : 25, y : 100 },
// additional translation of each item
translation : 0,
// if the cards should be centered after the transform
// is applied
center : true,
// add a random factor to the final transform
scatter : false
};
基本的样式都写在baraja.css文件中。
在下载包中列举了许多不同的例子,你可以下载来研究他们。
html5点击展开动画效果,jquery展开收缩扑克牌动画效果教程相关推荐
- html淡化效果,jQuery实现基本淡入淡出效果的方法详解
本文实例讲述了jQuery实现基本淡入淡出效果的方法.分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元 ...
- 搞定动画之 JQuery 中的自定义动画
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志--苏轼 写在前面 所谓的自定义动画就是通过 jQuery 提供的方法来完成我们自己想要的动画效果 animate()方法 jQuery 提供了 ani ...
- html 购物车动画效果,Jquery商品飞入购物车动画效果实例展示
刚接手一个小玩意,值得收藏分享给大家! <产品图片飞入购物车的jQuery动画> 无标题文档 *{ margin:0; padding:0;} .good-area{ width:200p ...
- html5 呼吸灯效果,jQuery仿地铁线路指示灯效果
jquery地铁线路指示灯 $(document).ready(function(){ var index=0; setInterval(function(){ $("li").e ...
- ajax实现翻书效果,jquery实现的翻书效果
插件描述:利用jquery插件实现的类似图书翻书效果功能 Booklet是一个基于jQuery库的实现网页上翻书动画效果的插件,在jBooklet页面上可以写任何支持html的内容,而软件设置相当简单 ...
- jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果 转载于:https://www.cnblogs.com/DreamDrive/p/5780292.html
- html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
- 展开和收起动画(jQuery)
展开和收起动画(jQuery) 废话不多说,上代码!!! <!DOCTYPE html> <html lang="en"><head><m ...
- Threejs实现WebVR全景小行星入场动画/鱼眼效果/球形展开效果
1,功能介绍 使用Threejs实现WebVR全景,VR全景小行星入场动画.鱼眼效果.由远到近效果.球形展开动画效果.如下效果图: 这种效果其实很简单,通过修改像机视锥体垂直视野角度fov,和相机的坐 ...
最新文章
- 将python3.1+pyqt4打包成exe
- 深度特征合成与遗传特征生成,两种自动特征生成策略的比较
- 设计模式——设计模式之禅day2
- javascript 获取光标所选中的内容并插入到另一个文本框中(兼容ie和ff)
- U-BOOT的目录结构
- The property delegate of CALayer cause Crash.
- 【pyradiomics学习】——影像组学特征
- mysql确认半同步命令_怎么判断mysql是否是半同步复制
- Windows Server 2008 多元密码策略配置
- 忘记linux虚拟机密码怎么办
- PBRT 阅读 第一章
- Python3 Cobalt strike shellcode 免杀过 360 卫士和360杀毒
- 第21课: JSP语句 if判断语句 (JSP教程 JSP入门实战教程 黄菊华Java网站开发系列教程)
- 迅雷手机版苹果版_2020最新迅雷苹果版如何下载?
- java无法解析类型数据,”无法解析类型 这是简介引用的类文件要求 从必需的 .class 文件间接引用了“——解决方法...
- 软件测试工程师岗位职责、岗位要求
- pycharm清华镜像源使用
- 走过30年岁月的WPS,它的复兴之路该怎么走
- Keil5 MDK版本使用ST-LINK下载程序的方法及注意事项
- [CAS]ServiceTicket [x] with service [x] does not match supplied service [x]
热门文章
- 中职计算机word上机试题,中职计算机基础WORD2003试题
- html如何查找文件,查找文件名为A 的文件怎么查
- 【CF665E】 Beautiful Subarrays
- 【内网流量操控技术八】lcx源码编译实现传输层流量转发
- uniapp 电子印章_第一章搭建uni-app 记账小程序
- linux下sssd_be服务是什么?
- 【TA-霜狼_may-《百人计划》】美术2.2 模型基础
- greenplum 递归函数
- Vim中如何切换窗口?
- 荣耀手表magic2 鸿蒙,荣耀手表魔法系列:强悍不仅是长续航那么简单