jquery+css3立方体自定义生成(原创)

所属分类:媒体-幻灯片和轮播图

 21925  308  查看评论 (1)
分享到微信朋友圈
X
jquery+css3立方体自定义生成(原创) ie兼容12

欢迎使用矩体自定义生成插件

在使用之前,您需要了解,该插件是基于jquery制作的,您需要引入最新版jquery.js

jquery.js cdn:  

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

引入jquery.js之后,就可以引入插件文件

<script src="js/cube.js" type="text/javascript" charset="utf-8"></script>

插件引入之后,您需要添加矩体的基本框架(html部分

<div>
    <div class="">
        1
    </div>
    <div class="">
        2
    </div>
    <div class="">
        3
    </div>
    <div class="">
        4
    </div>
    <div class="">
        5
    </div>
    <div class="">
        6
    </div>
</div>

css部分:

.cube {
    /*必须设置,宽高可自定义*/
    width: 500 px;
    height: 500 px;
    /*必须设置,可选择position: relative或position: absolute;*/
    position: relative;
    /*测试用动画,默认关闭*/
    /*animation: zz 20s infinite linear;*/
    /*可选:自定义样式区开始*/
    margin: 0 auto;
    margin - top: 500 px;
    /*可选:自定义样式区结束*/
}
/*测试用动画,默认关闭*/
@ - webkit - keyframes zz {
        from {
            transform: rotateX(0 deg) rotateY(0 deg) rotateZ(0 deg);
        }
        to {
            transform: rotateX(-360 deg) rotateY(-360 deg) rotateZ(-360 deg);
        }
    }
    .cube > div {
        /*不可编辑区开始*/
        width: 100 % ;
        height: 100 % ;
        position: absolute;
        /*不可编辑区结束*/
        /*可选:自定义样式区开始*/
        background - color: rgba(0, 0, 0, 0.9);
        display: flex;
        justify - content: center;
        align - items: center;
        font - size: 80 px;
        color: white;
        /*可选:自定义样式区结束*/
    }

注意,矩体的宽高需要设置在cube上,这是矩体的主框架,可以自定义类名

最后,添加插件启动代码

//矩体翻转index,可用cube_index=1的方式直接赋值,index最大值为6,最小值为1
var cube_index = 1;
//组件调用方法:cube("矩体主样式名",矩体各面分离量, 矩体翻转切换index值);
cube("cube", 10, cube_index);

好了,现在您拥有了一个自定义的矩体,矩体的大小取决于您对cube宽高的设置,矩体的每个面的内容和背景色您都可以自行设置,可兼容-webkit-核心浏览器

相关插件-幻灯片和轮播图

jQuery焦点图插件slideshow-jq.js

jQuery自动化图片比例焦点图slider效果
  幻灯片和轮播图
 29505  313

anoSlide演示8种焦点图轮播效果

anoSlide演示8种焦点图轮播效果
  幻灯片和轮播图
 28151  328

jQuery幻灯插件

号称世界最棒的jQuery幻灯插件 16种幻灯变化的特效 简单并且配置灵活 体积小并且符合语义
  幻灯片和轮播图
 31862  367

仿360新闻图文混排焦点图

仿360新闻图文混排焦点图,兼容ie6
  幻灯片和轮播图
 30452  376

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

    ?风殇?雪霁? 0
    2019/1/22 11:58:27
    对代码有什么疑问的可在此留言,我每天都会上线查看的 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复