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

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

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

（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');
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" class="open" value=&quo

  • js+css3实现旋转效果

    js+css3实现旋转效果

    我的前面一张文章实现了用css3制作旋转的效果,现在呢,我换另外一种方法来实现.就是使用js结合css3的方法来实现的.下面我就先上图给大家看看效果吧 下面呢我先放上我的css代码,代码很简单: .one{ width:200px; height: 200px; border:1px solid #adadad; transition:all 0.1s; border-radius:50%; background:url(images/1.jpg) no-repeat center center

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

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

    我们经常会在游戏里看到一些几张卡牌左右切换的效果,中间的一张最突出醒目,向左或向右滑动可切换到另一张,今天我们就用CSS3来实现下这种效果. 我们先来看个demo,具体的样式各位可以自己调整: (PC下可点击按钮切换,移动端可左右滑动切换) 从效果上我们可以看到,这5个div可以左右的切换,每次切换时总会有一个在中间显眼的位置进行展示.在切换时,看起来是div进行了移动,进行了DOM的增删操作.但是如果审查下元素,就能看到,DOM元素没有变换位置,它依然在那个位置,我们只是切换了每个元素上的cl

  • js实现简单选项卡与自动切换效果的方法

    本文实例讲述了js实现简单选项卡与自动切换效果的方法.分享给大家供大家参考.具体分析如下: 这里再上篇<js实现简单的可切换选项卡效果>基础上,进一步实现可以自动切换的切换效果,用这种效果就可以做简单的焦点图了. 说明: 设置一个标识数字置为0,写一个每过几秒标识+1,执行切换效果的函数,然后执行. 当标识超过当前选项卡长度让标识置为0. 在鼠标移到选项卡的时候关闭定时器,鼠标移走的时候打开定时器. <!DOCTYPE html> <html> <head>

  • JS+CSS3制作炫酷的弹窗效果

    JS+CSS3制作炫酷的弹窗效果

    昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~ 首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给他设置属性,让

  • js控制多图左右滚动切换效果代码分享

    js控制多图左右滚动切换效果代码分享

    本文实例讲述了js控制多图左右滚动切换效果.分享给大家供大家参考.具体如下: 这是一款纯js实现点击左右按钮图片自动左右平滑滚动,默认5个一组左右滚动,可以手动修改js参数更改滑动数量. 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js控制多图左右滚动切换效果代码如下 <head> <meta http-equiv="Content-Type"

  • JS原生带缩略图的图片切换效果

    本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二版)>一书第10章中有一段代码.(可以直接baidu) 左边是banner图,右边是缩略图,当鼠标滑入缩略图时,也会切换图片. 一.这段是html代码,可以直接拷贝,需要自己准备相同大小的banner图,例中图片都是500x300 <!DOCTYPE html> <html lang="en"&g

  • vue自定义js图片碎片轮播图切换效果的实现代码

    定义一个banner.js文件,代码如下 ;window.requestAnimationFrame = window.requestAnimationFrame||function(a){return setTimeout(a,1000/60)}; window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout; var FragmentBanner = function(option) { //实例化时,可传的参

  • Vue.js实现微信过渡动画左右切换效果

    Vue.js实现微信过渡动画左右切换效果

    前言 在awesomes上寻找移动端框架的时候意外发现了vux的页面切换效果,后面由于其他考虑没有选用vuex但是这个切换效果确实感觉很有新意,也就看了下源码,这里贴一份备用. 需要用到的技术栈:Vue+Vuex 先看看效果图 过渡动画 示例代码 //app.vue <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')"> <keep-alive> <router-

  • 原生js实现图片层叠轮播切换效果

    原生js实现图片层叠轮播切换效果

    本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下 效果图: 功能描述: 自定义图片尺寸: 每隔一段时间自动滚动图片: 每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化: 鼠标移上图片,显示当前图片的详细信息: 点击按钮向前向后滚动: 详细代码: html代码: <!DOCTYPE html> <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topi

  • js和jquery实现tab状态栏切换效果

    js和jquery实现tab状态栏切换效果

    今天做一个简单的小案例,用js和jquery分别去实现点击tab栏,实现切换的目的,效果如下图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>状态栏切换</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .main { width

  • jQuery+CSS3折叠卡片式下拉列表框实现效果

    jQuery+CSS3折叠卡片式下拉列表框实现效果

    jQuery下拉列表框特效将每一个列表项都制作为卡片的样式,打开和关闭它有打开和关闭百叶窗的感觉,效果非常不错,分享给大家. 简要教程 HTML结构 该下拉列表框特效的列表项使用一个无序列表来制作,用于切换打开和关闭状态的元素是一个超链接元素. <div class="container"> <div class="card-drop"> <a class='toggle' href="#"> <i cl

随机推荐