利用jquery实现扑克洗牌魔术变换



48 190 64



特效描述:利用jquery实现 扑克洗牌 魔术变换,利用jquery实现扑克洗牌魔术变换

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/baraja.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.baraja.js"></script>

3. HTML代码

		<div class="container">
			<header class="clearfix">
			</header>
			<section class="main">
				<nav class="actions">
					<span id="nav-fan">Fan right</span>
					<span id="nav-fan2">Fan left</span>
					<span id="nav-fan3">Fan right (asym.)</span>
					<span id="nav-fan4">Fan left (asym.)</span>
					<span id="nav-fan5">Rotated spread (horizontal)</span>
					<span id="nav-fan6">Rotated spread (vertical)</span>
					<span id="nav-fan7">Linear spread right</span>
					<span id="nav-fan8">Linear spread left</span>
					<span id="nav-fan9">Linear spread right (irregular)</span>
					<span id="nav-fan10">Linear spread left (irregular)</span>
					<span id="nav-fanOther1">other</span>
					<span id="nav-fanOther2">other</span>
					<span id="nav-fanOther3">other</span>
					<span id="nav-fanOther4">other...</span>
					<span id="add">Add items</span>
				</nav>
				<div class="baraja-demo">
					<ul id="baraja-el" class="baraja-container">
						<li><img src="images/1.jpg" alt="image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>
						<li><img src="images/2.jpg" alt="image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
						<li><img src="images/3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>
						<li><img src="images/4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>
						<li><img src="images/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>
						<li><img src="images/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>
						<li><img src="images/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li>
						<li><img src="images/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li>
						<li><img src="images/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>
						<li><img src="images/10.jpg" alt="image10"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>
						<li><img src="images/11.jpg" alt="image11"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>
						<li><img src="images/12.jpg" alt="image12"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
						<li><img src="images/3.jpg" alt="image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>
						<li><img src="images/4.jpg" alt="image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>
						<li><img src="images/5.jpg" alt="image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>
						<li><img src="images/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>
						<li><img src="images/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li>
						<li><img src="images/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li>
					</ul>
				</div>
				<nav class="actions light">
					<span id="nav-prev">&lt;</span>
					<span id="nav-next">&gt;</span>
					<span id="close">close</span>
				</nav>
			</section>
        </div>
        <script type="text/javascript">	
			$(function() {
				var $el = $( '#baraja-el' ),
					baraja = $el.baraja();
				// navigation
				$( '#nav-prev' ).on( 'click', function( event ) {
					baraja.previous();
				} );
				$( '#nav-next' ).on( 'click', function( event ) {
					baraja.next();
				} );
				// simple fan
				$( '#nav-fan' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 90,
						direction : 'right',
						origin : { x : 25, y : 100 },
						center : true
					} );
				} );
				$( '#nav-fan2' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 90,
						direction : 'left',
						// note that the x origin changes (symmetric)
						origin : { x : 75, y : 100 },
						center : true
					} );
				} );
				// more realistic fan: without common origin (means the origin changes / increments by card )
				$( '#nav-fan3' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 90,
						direction : 'right',
						origin : { minX : 20, maxX : 80, y : 100 },
						center : true,
						translation : 60
					} );
				} );
				$( '#nav-fan4' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 90,
						direction : 'left',
						origin : { minX : 20, maxX : 80, y : 100 },
						center : true,
						translation : 60
					} );
				} );
				// playing with different origins and ranges	
				$( '#nav-fan5' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 100,
						direction : 'right',
						origin : { x : 50, y : 200 },
						center : true
					} );
				} );
				$( '#nav-fan6' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 80,
						direction : 'left',
						origin : { x : 200, y : 50 },
						center : true
					} );
				} );
				// center false, playing with translation
				$( '#nav-fan7' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 20,
						direction : 'right',
						origin : { x : 50, y : 200 },
						center : false,
						translation : 300
					} );
				} );
				$( '#nav-fan8' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 20,
						direction : 'left',
						origin : { x : 50, y : 200 },
						center : false,
						translation : 300
					} );
				} );
				// using scatter : true
				$( '#nav-fan9' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 20,
						direction : 'right',
						origin : { x : 50, y : 200 },
						center : false,
						translation : 300,
						scatter : true
					} );
				} );
				$( '#nav-fan10' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 20,
						direction : 'left',
						origin : { x : 50, y : 200 },
						center : false,
						translation : 300,
						scatter : true
					} );
				} );
				$( '#nav-fanOther1' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 130,
						direction : 'left',
						origin : { x : 25, y : 100 },
						center : false
					} );
				} );
				$( '#nav-fanOther2' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 360,
						direction : 'left',
						origin : { x : 50, y : 90 },
						center : false
					} );
				} );
				$( '#nav-fanOther3' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 330,
						direction : 'left',
						origin : { x : 50, y : 100 },
						center : true
					} );
				} );
				$( '#nav-fanOther4' ).on( 'click', function( event ) {
					baraja.fan( {
						speed : 500,
						easing : 'ease-out',
						range : 90,
						direction : 'right',
						origin : { minX : 20, maxX : 80, y : 100 },
						center : true,
						translation : 60,
						scatter : true
					} );
				} );
				// close the baraja
				$( '#close' ).on( 'click', function( event ) {
					baraja.close();
				} );
				// example of how to add more items
				$( '#add' ).on( 'click', function( event ) {
					if( $( this ).hasClass( 'disabled' ) ) {
						return false;
					}
					$( this ).addClass( 'disabled' );
					baraja.add( $('<li><img src="images/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li><li><img src="images/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li><li><img src="images/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li><li><img src="images/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>') );
				} );
			});
		</script>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 导航切换 图片叠加 图片头像上传 文件上传 图片切换 文本框 文字切换 下拉框 背景切换 复选 手风琴 单选 选项卡自动切换 登录框 视频切换 注册框 列表切换 搜索框 验证码 渐隐切换 二级联动 全屏切换 三级联动 切换按钮 城市选择 缩放切换 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动切换 滑动选项卡切换 叠加浮动层 选项卡切换 滑动手风琴 重叠层叠叠加 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到