好看的3D圆形明信片-3D FLIPPING CIRCLE

所属分类:媒体-图片展示

 33664  322  查看评论 (1)
分享到微信朋友圈
X
好看的3D圆形明信片-3D FLIPPING CIRCLE ie兼容10

说实话,第一眼看到这款插件给我一种浪漫的感觉,因为这很像是送给某某女生的一张明信片,而且结合css和jquery真实地模拟出了3D的打开和关闭效果。相信这款插件一定会给你带来某些回忆。

使用步骤

1、引入以下的js和css文件

<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/hammer.js"></script>
<script type="text/javascript" src="js/jquery.hammer.js"></script>


2、在head标签中加入以下js代码

 $(function() {           
    var $wrapper= $( '#fc-wrapper' ),
        $handle = $wrapper.children( 'div.fc-handle-pull' ); 
        $handle.on( 'click', function( event ) {
        ( $handle.data( 'opened' ) ) ? close() : open();
    } );
    $wrapper.hammer().bind( 'dragend', function( event ) {
        switch( event.direction ) {
            case 'right'    : open(); break;
            case 'left'     : close(); break;
        }
    });    
    function open() {
        $wrapper.addClass( 'fc-wrapper-open' );
        $handle.data( 'opened', true );
    }   
    function close() {
        $wrapper.removeClass( 'fc-wrapper-open' );
        $handle.data( 'opened', false );
    }
} );



以上便是整个效果的实现过程了,如果你想对其中的某些css效果感兴趣的可以查看源码中的css样式,也可以到官网查看,里面把样式表给拆开进行详细讲解其中的每个效果的实现过程了。至于jquery,官方也没有给出相关文档,如果感兴趣的话可以自行研究里面的js源代码。

相关插件-图片展示
  图片展示
 45099  402

纯js图片旋转

JavaScript图片特效
  图片展示
 43489  435

jQuery加vue 3D盒子旋转展示

3D旋转盒子,全景展示,可选择图片,设置宽高
  图片展示
 34970  366

jQuery放大镜插件cloudzoom.js

jQuery放大镜插件cloudzoom.js,可以实现切换图片,支持滚轮控制放大比例
  图片展示
 43408  411

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Scripter 0
    2018/1/2 15:18:58
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复