js CSS3实现卡牌旋转切换效果


Posted in Javascript onJuly 04, 2017

我们经常会在游戏里看到一些几张卡牌左右切换的效果,中间的一张最突出醒目,向左或向右滑动可切换到另一张,今天我们就用CSS3来实现下这种效果。

我们先来看个demo,具体的样式各位可以自己调整:

js CSS3实现卡牌旋转切换效果

(PC下可点击按钮切换,移动端可左右滑动切换)

从效果上我们可以看到,这5个div可以左右的切换,每次切换时总会有一个在中间显眼的位置进行展示。在切换时,看起来是div进行了移动,进行了DOM的增删操作。但是如果审查下元素,就能看到,DOM元素没有变换位置,它依然在那个位置,我们只是切换了每个元素上的class,于是页面上的位置看起来是发生了变化。

其实原理就是这样的: 不进行DOM的增删,为每个位置上的div都写上特定的样式,每个div都进行绝对定位,然后进行样式的轮播。 每次切换都有个0.6s过渡过程:

-webkit-transition: all 0.6s;
transition: all 0.6s;

比如从左往右的class分别为:item_0, item_1, item_cur, item_3, item_4,每个class都是当前所在div的定位,向左滑动时,右边的div会切换到中间,这样class从左往右就变成了item_1, item_cur, item_3, item_4, item_0。

var egg_change = function(type){
 var $demo = $('.demo'),
  index = parseInt( $demo.attr('index_cur')||2 ),
  $item = $('.demo .item'),
  len = $item.length;

 if( type=='left' ){
  index = (index+1)%len;
 }else{
  index = (index-1+len)%len;
 }
 $demo.attr('index_cur', index);

 $item.removeClass('item_0 item_1 item_3 item_4 item_cur');
 
 $item.eq( (index-2+len)%len ).addClass('item_0');
 $item.eq( (index-1+len)%len ).addClass('item_1');
 $item.eq(index).addClass('item_cur');
 $item.eq( (index+1)%len ).addClass('item_3');
 $item.eq( (index+2)%len ).addClass('item_4');
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
JS如何生成动态列表
Sep 22 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 #Javascript
原生js实现简单的链式操作
Jul 04 #Javascript
详解用vue编写弹出框组件
Jul 04 #Javascript
使用vue构建一个上传图片表单
Jul 04 #Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 #Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 #Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 #Javascript
You might like
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
精通Javascript系列之数值计算
2011/06/07 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
如何通过python检查文件是否被占用
2020/12/18 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
PHP如何去执行一个SQL语句
2016/03/05 面试题
专业实习自我鉴定
2013/10/29 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
中秋晚会策划方案
2014/06/12 职场文书
公司活动总结怎么写
2014/06/25 职场文书
庆元旦活动总结
2014/07/09 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
企业催款函范本
2015/06/24 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python