Rumah  >  Soal Jawab  >  teks badan

javascript - 求大神看下这个jq实现的翻牌效果原理,请问它是怎样实现的?感觉不是`animate`

http://www.wesai.com/&x-from=...
就像xSai首页赛事下边的立体翻牌效果,写了几次都不是很像微赛的那种,求大神写个类似的demo,我现在的实现方式与http://www.xwcms.net/webAnnex... 这个demo 一致,其原理是 animate动画效果,但是与其Xsai页面那种效果感觉有差异,尤其是卡顿效果,立体的翻牌动作,我是直接将宽弄为0然后在出来100%的宽,真不知道咋想的

var turn = function(target,time,opts){
    target.find('a').hover(function(){
        $(this).find('img').stop().animate(opts[0],time,function(){
            $(this).hide().next().show();
            $(this).next().animate(opts[1],time);
        });
    },function(){
        $(this).find('.info').animate(opts[0],time,function(){
            $(this).hide().prev().show();
            $(this).prev().animate(opts[1],time);
        });
    });
}
var verticalOpts = [{'width':0},{'width':'180px'}];
turn($('#vertical'),100,verticalOpts);
var horizontalOpts = [{'height':0,'top':'120px'},{'height':'240px','top':0}];
turn($('#horizontal'),100,horizontalOpts);

但是我们产品执意需求上面那种效果

巴扎黑巴扎黑2727 hari yang lalu341

membalas semua(6)saya akan balas

  • 高洛峰

    高洛峰2017-04-11 09:11:52

    请看这里
    我这里没有使用 js做操作 而是使用了 css的伪类
    一些默认设置

    {
      width:185px;
      height:251px;
      -webkit-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transition: all 400ms linear;
      transition: all 400ms linear;
    }

    在需要翻转的时候 添加 样式

    {
      -webkit-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      transform: rotateY(180deg); 
    }

    balas
    0
  • 阿神

    阿神2017-04-11 09:11:52

    热门赛事那里,几个图片的hover事件,我用的是那个f...的动画实现放上去和移出去的效果,但是始终做不到它的3d停留那种效果,请问是什么类库或者插件吗??

    balas
    0
  • 天蓬老师

    天蓬老师2017-04-11 09:11:52

    楼主可以看一下perspective和transform两个属性

    balas
    0
  • 大家讲道理

    大家讲道理2017-04-11 09:11:52

    谢邀,支持css3吗?transform和transition

    balas
    0
  • 巴扎黑

    巴扎黑2017-04-11 09:11:52

    参考https://daneden.github.io/ani...

    balas
    0
  • 迷茫

    迷茫2017-04-11 09:11:52

    看了一下他的源码 全部是用CSS实现的呀

    balas
    0
  • Batalbalas