扑克牌效果

最新推荐文章于 2024-07-14 15:54:59 发布
最新推荐文章于 2024-07-14 15:54:59 发布
阅读量125 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/sj1988/p/7113435.html
版权 

HTML部分内部
<div id="projects">
			<!--grid网格-->
			<div class="grid">
				<!--project项目-->
				<div class="projects">
					<!--1-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>						
					</div>	
					
					<!--2-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>						
					</div>
					
					<!--3-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>						
					</div>
					
					<!--4-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>						
					</div>
					
					<!--5-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>						
					</div>
					
					<!--6-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>						
					</div>
					
					<!--7-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>						
					</div>
					
					<!--8-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>						
					</div>
					
					<!--9-->
					<div class="project">
						<div class="mask">
							<div class="back"></div>
							<div class="front"></div>
						</div>						
					</div>
					
					<!--10-->
					<div class="controls">
						<span class="bottom"></span>	
						<span class="bottom"></span>
						<span class="bottom"></span>
						<div class="mask"></div>
					</div>
					
				</div>				
			</div>
		</div>

　　

CSS部分：
CSS部分：
/*
* @Author: Administrator
* @Date:   2017-01-11 15:33:23
* @Last Modified by:   Administrator
* @Last Modified time: 2017-01-11 16:32:03
*/
body{background-color: #ef4036;}


#projects, #projects .grid {
    height: 1100px;
}
#projects {
    background-color: #ef4036;
    overflow: hidden;
}

.project {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0 0 15px 15px;
}
.project {
    float: left;
    width: 222px;
    height: 311px;
}
.grid {
    width: 1170px;
    margin: 0 auto;
    position: relative;
}
div.projects {
    height: 652px;
}
div.projects {
    float: left;
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
}
div.projects .controls {
    position: absolute;
    right: 0;
    bottom: 15px;
}
div.projects .controls {
    float: left;
    width: 222px;
    height: 311px;
}
.controls .mask {
    float: left;
    position: relative;
    background: url(../img/project_card_bg.png) no-repeat;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
div.projects .controls .bottom{
      -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
div.projects .controls .bottom {
    background: url(../img/project_card_bot_bg.png) no-repeat;
    position: absolute;
    bottom: -9px;
    right: 0;
    width: 222px;
    height: 66px;
}

div.projects .controls .bottom+.bottom+.bottom {
    bottom: -3px;
}
div.projects .controls .bottom+.bottom {
    bottom: -6px;
}

div.projects .controls:hover .bottom+.bottom+.bottom {
    bottom: -8px;
}
div.projects .controls:hover .bottom+.bottom {
    bottom: -14px;
}
div.projects .controls:hover .bottom {
    bottom: -20px;
}


.project.ani0 {
    right: 948px;
    bottom: 326px;
}
.project.ani1 {
    right: 711px;
    bottom: 326px;
}
.project.ani2 {
    right: 474px;
    bottom: 326px;
}
.project.ani3 {
    right: 237px;
    bottom: 326px;
}

.project.ani4 {
    right: 0;
    bottom: 326px;
}

.project.ani5 {
    right: 948px;
    bottom: 0;
}
.project.ani6 {
    right: 711px;
    bottom: 0;
}
.project.ani7 {
    right: 474px;
    bottom: 0;
}
.project.ani8 {
    right: 237px;
    bottom: 0;
}

.project .front {
    background: url(../img/project_front_bg.png) no-repeat;
    display: table;
}
.project .back, .project .front {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.project .back {
    background: url(../img/project_back_bg.png) no-repeat;
}
.project .back, .project .front {
    position: absolute;
    left: 0;
    top: 0;
    width: 222px;
    height: 311px;
    padding: 0 16px;
    text-align: center;
}

.project, .project .back, .project .front, .socials a, .transform_holder .back, .transform_holder .front, .transform_holder .transform {
    -webkit-transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);
    -moz-transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);
    -o-transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);
    -ms-transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);
    transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);
}
.project {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}
.project .back, .project .front {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.project .front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}
 .project .back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
 .project.hover .front, .project:hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

 .project.hover .back, .project:hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

　　

JS部分

JS部分
	<script type="text/javascript" src="js/jquery.js" ></script>
		<script>
		  $(function(){
		    $('.controls').click(function(){
		      if($(this).hasClass('show')){
		        $(this).removeClass('show');
		        subMove();
		      }else{
		        $(this).addClass('show');
		        addMove();
		      }
		    })
		  })
		
		
		  function addMove(){
		    $('.project').each(function(index,item){
		      setTimeout(function(){
		       $(item).addClass('ani'+ index);
		     },index*300);
		    })
		  }
		
		  function subMove(){
		    $('.project').each(function(index,item){
		       $(item).removeClass('ani'+ index);
		    })
		  }
		</script>

　　

 

转载于:https://www.cnblogs.com/sj1988/p/7113435.html

dcw43465
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript发扑克牌并且将牌整理好
weixin_42456855的博客
08-10 1997
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; var mycards = [ //数值从大到小,方便后面牌排序 //大 小 王
ios 扑克牌效果轮播_iOS开发UI篇—无限轮播（功能完善）
weixin_42566209的博客
12-24 328
iOS开发UI篇—无限轮播(功能完善)一、自动滚动添加并设置一个定时器，每个2.0秒，就跳转到下一条。获取当前正在展示的位置。1 [self addNSTimer];2 }34 -(void)addNSTimer5 {6 //NSTimer timerWithTimeInterval: target: selector: userInfo: repeats:7 [NSTimer sched...
使用Poker.js在html页面上绘制扑克牌
08-26 1016
今天研究了下Poker.js，Poker.js是通过扩展HTML5 Canvas实现的画扑克牌的JS库。 Poker.js下载地址：https://github.com/Tairraos/Poker.JS 如要使用Poker.js，从github下载代码后，直接引用release目录下的p...
javascript练习-扑克牌
bangshix821034的博客
12-13 418
下面用枚举类型来实现一副扑克牌的类： //定义一个玩牌的类 function Card(suit,rank){ function inherit(p){ if(p==null) throw TypeError(); if(Object.create) return Object.create(p); var t = typeof p; if(t!=="object" &...
原生js生成扑克牌
fengsunest的博客
09-17 3563
var types = [“红桃”, “黑桃”, “方块”, “梅花”], // 花色 points = [“A”, 2, 3, 4, 5, 6, 7, 8, 9, 10, “J”, “Q”, “K”], // 点数 cards = [“大王”, “小王”]; // 所有扑克牌 // 遍历所有花色与点数 for (var i in types) { for (var j in points...
ios 扑克牌效果轮播_缩放效果的轮播图 iOS
weixin_35681725的博客
01-14 379
111.gif做个一个缩放的轮播图，基本实现功能。简单的记录下思路:因为屏幕展示有三张图，所以传入的图片要先添加4张，左边两张(倒数第二张，倒数第一张)，右边两张(第一张，第二张)1、实现图片缩放功能(主要代码)-(void)scaleImagevWithCenterX:(CGFloat)centerx{for (UIImageView *imagev in self.imgViewArr) {/...
ios 扑克牌效果轮播_iOS一行代码实现立体轮播图
weixin_35160622的博客
12-24 357
示例图片bannergif.gif使用方法1. 初始化(instancetype)initWithFrame:(CGRect)frame WithBannerSource:(NinaBannerSource)bannerSource WithBannerArray:(NSArray *)bannerArray;2. 设置属性自动轮播间隔时间@property (nonatomic, assign)...
ios 扑克牌效果轮播_iOS开发之无限轮播广告图的实现
weixin_31998371的博客
01-14 217
前言我们在开发中经常会有开发广告轮播图的需求，在这里讲解一种实现方式，只需要使用3个UIImageView实现无限循环的功能。效果展示：效果图.gif原理说明在这个方案中，我们会使用三个UIImageView用于承载Image，但每次滚动完成后都调整每个UIImageView的Image，然后调用以下方法去设置ScrollView的位置，使其回到最中间第二张UIImageView(通过设置anim...
ios 扑克牌效果轮播_js扑克堆叠式卡片轮播图插件
weixin_33480732的博客
01-14 1028
这是一款js扑克堆叠式卡片轮播图插件。高轮播图的所有图片像扑克牌一样堆叠在一起，通过鼠标拖拽最上面的一张图片，就可以显示出下一张图片来。使用方法在HTML文件中引入。HTML结构初始化插件然后通过下面的代码来初始化插件。class Carousel {constructor(element) {this.board = element// add first two cards programma...
ios 扑克牌效果轮播_五分钟在 iOS 中实现循环轮播
weixin_33389398的博客
01-14 218
图片(视图)轮播是许多 App 中常见界面效果，打开简书主页，我们也能看到类似的效果。对于其实现，网上也有好多方法，最简单的方法无非是将所有的 view 添加到一个 UIScrollView 中，然后设置其 paging 属性。这个方法虽然简单，但是无法实现循环效果，而且页码控件也需要我们计算一些数值来设置，况且，当 view 多了时无法做到循环利用，造成同屏 view 过多导致卡顿。My Fir...
纯CSS实现扑克牌效果
09-05
纯CSS实现扑克牌效果，太牛了吧？开始我还以为是一张图片呢，后来发现代码里没有调用任何图片，顿时有点诧异，CSS果然很牛，或是作者水平比较牛？
扑克牌效果_ LXJ_Make
09-20
"扑克牌效果"是一种流行且独特的视图切换动画，它在用户翻页滑动时，使得页面如同翻转扑克牌一样，呈现出3D的立体感，增加了应用的趣味性和动态美。这种效果在iOS应用中被广泛应用，尤其是在展示列表或卡片内容时，...
相册展示 或者封面展示 中扑克牌效果
10-23
在IT行业中，创建一个“相册展示或封面展示中的扑克牌效果”是一种创新且吸引人的设计方式，尤其适用于多媒体应用、游戏或者个性化界面设计。这种效果通过模拟扑克牌的翻转、滑动动作，给用户带来生动且有趣的交互...
54张高清全套扑克牌大图.rar
12-10
【标题】"54张高清全套扑克牌大图.rar"所...综合以上，这个压缩包资源对于设计师、游戏开发者、教学工作者或是扑克牌爱好者来说都非常有用，无论是用于创建视觉效果、开发扑克牌类游戏，还是教学示例，都能找到其价值。
【JavaScript 报错】未捕获的URI错误：Uncaught URIError
Allen-
07-11 664
Uncaught URIError 是JavaScript中常见的一种错误，通常发生在全局URI处理函数（如 decodeURIComponent、encodeURIComponent）使用不当时。本文将详细介绍 Uncaught URIError 错误的常见原因及其解决方案。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 286
原生WebSocket： new WebSocket。
ReactRouter v6升级的步骤
最新发布
feixin369的博客
07-14 173
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
商品详情使用富文本编辑器
m0_74356429的博客
07-13 114
2、因为好多页面都需要用到，封装富文本编辑器组件。3、在商品编辑和商品添加页面添加富文本编辑器。Editor.vue代码。
javascript的高级用法(循环实现数组map方法)
阿乐的博客
07-13 107
值得一提的是，map的第二个参数就是第一个参数回调中的这个点。如果第一个参数是箭头函数，则设置第二个 this 将无效，因为箭头函数的词法绑定。另一个是稀疏数组的处理，HasOwnProperty 用于判断当前下标的元素是否存在于数组中，欢迎大家在评论区交流。使用方法：将selfMap注入到Array.prototype中（下面数组的迭代方法也是如此）
实现扑克牌翻转效果的css样式
05-19
以下是一种实现扑克牌翻转效果的 CSS 样式： HTML 代码： ```html <div class="card-face card-front"></div> <div class="card-face card-back"></div> ``` CSS 代码： ```css .card { position: relative...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值