转载

发表于 2015年12月01日
浏览 (648)
评论 (0)

带图片倒影的jQuery响应式3D旋转木马插件

简要教程

mk-3Dcarousel是一款带图片倒影效果的响应式3D旋转木马 jQuery插件。该旋转木马使用简单，可以生成非常漂亮的图片倒影效果，可以在所有最新版本的现代浏览器中正常工作。

该旋转木马插件在小屏幕中会以另一种不同的风格进行图片展示。

带图片倒影的jQuery响应式3D旋转木马插件

查看演示下载插件

使用方法

使用该3D旋转木马插件需要引入jQuery、mk-3Dcarousel.js和mk-3Dcarousel.css文件。

HTML结构

mk-3Dcarousel 3D旋转木马插件的HTML结构非常简单：使用一个<div> 元素作为包裹容器，里面放置需要的图片即可。

带图片倒影的jQuery响应式3D旋转木马插件

带图片倒影的jQuery响应式3D旋转木马插件

带图片倒影的jQuery响应式3D旋转木马插件

带图片倒影的jQuery响应式3D旋转木马插件

带图片倒影的jQuery响应式3D旋转木马插件

带图片倒影的jQuery响应式3D旋转木马插件

带图片倒影的jQuery响应式3D旋转木马插件

带图片倒影的jQuery响应式3D旋转木马插件

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该3d旋转木马插件。

$(function(){     $('#mkCarousel').mkCarousel(); });

配置参数

该3d旋转木马插件有以下一些可用的配置参数：

responsive：是否开启响应式效果，默认值为true。

breakpoint：响应式断点，默认值为768。

offset：偏移值(桌面设备)，默认值为100。

mobileOffset：偏移值(移动手机)，默认值为50。

controlNavs：是否显示导航控制，默认值为true。

推荐阅读：超酷jQuery 3D旋转木马效果轮播图插件

来源jQuery之家

正文到此结束

所属分类：编程技术

本文标签： DOM js HTML 响应式 HTML5 下载 CSS http UI src jquery 参数配置插件
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

热门推荐

openfire数据库安装指南

浏览(14,001) 评论(0)
Caffe 深度学习框架上手教程

浏览(10,665) 评论(0)
ReactiveCocoa入门教程：第一部分

浏览(11,495) 评论(0)
开源HIDS-OSSEC使用实例:监测CC攻击

浏览(11,411) 评论(0)
Decorators in ES7

浏览(15,950) 评论(4)
用Electron（Atom编辑器的兄弟项目）开发桌面应用

浏览(28,964) 评论(0)
Windows下JetBrains CLion中文输出乱码的解决方法

浏览(12,421) 评论(1)
同步-@synchronized, NSLock, pthread, OSSpinLock性能比较

浏览(11,368) 评论(0)
Seaweedfs之Volume读请求重定向

浏览(25,668) 评论(3)
HTML、CSS及JavaScript ：有Promise，不会搞大肚子

浏览(13,506) 评论(0)

相关文章

阿里云首购8折

Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号

HBLOG

HBLOG