注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery 3d图片旋转木马特效插件Image Gallery Threejs

jQuery插件 fishcity 2449浏览

jQuery 3d图片旋转木马特效插件Image Gallery Threejs

Image Gallery Threejs这是一款炫酷jQuery 3D旋转木马图片画廊特效插件,该旋转木马特效可以设置图片预加载,带有前后导航按钮,可以使用鼠标前后旋转,并可以设置3D透视的位置。让人兴奋的是,Image Gallery Threejs完美支持IOS平板和苹果。

浏览器兼容

Firefox – 30.0.0 +

Chrome – 35.0.0 +

Explorer: 9 +

Ipad Safari: 7.0.0 +

Iphone Safari: 7.0.0 +

IOS Safari: 7.0.0 +

Android Chrome: 未测试

IOS Chrome: 未测试

jquery实例教程:Image Gallery Threejs使用方法

引入核心文件,例子依赖于好几个插件,因此引入了好多插件。

<link rel="stylesheet" type="text/css" media="screen,print" href="css/image-gallery-three.min.css" />
<link rel="stylesheet" type="text/css" media="screen,print" href="css/style.min.css" />

<script type='text/javascript' src='http://libs.useso.com/js/jquery/1.10.2/jquery.min.js'></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/assets.min.js"></script>
<script type="text/javascript" src="js/preloadjs.min.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>

<script type="text/javascript" src="js/image-gallery-three.min.js"></script>

构建html,只需真充一个div就且加上class,Image Gallery Threejs会按class查找到div容易,并在容器中自动添加上相关的html内容。

<div class="box"></div>

CSS相对简单,不多做解释

body{-webkit-touch-callout:none;-webkit-text-size-adjust:none;-webkit-user-select:none;font-family:Monospace;background-color:#000;overflow:hidden}
*{-webkit-tap-highlight-color:transparent}
A:active,A:link,A:visited{text-decoration:none;color:#86b0b0}
A:hover{text-decoration:underline;color:#00e5e5}

写入JS实例化插件

$(function(){
    var box = $(".box").ig3js({
        manifest: [
            {src:"image1.jpg", id:"image1"},
            {src:"image2.jpg", id:"image2"},
            {src:"image3.jpg", id:"image3"},
            {src:"image4.jpg", id:"image4"},
            {src:"image5.jpg", id:"image5"},
            {src:"image6.jpg", id:"image6"},
            {src:"image7.jpg", id:"image7"}    //图片路径列表,可以理解为图片名称
        ],
        imagePath: 'images/',   //存放图片的路径
        alphaBackground: true,  //透明背景
        onNavigateComplete: function(obj){  //旋转完成后执行
       //     console.log("navigation complete");
       //     console.log(obj);
        }
    });

    $(".next").click(function(){ //点击next按钮向下跳转
        box.navigate.next();
        return false;
    });

    $(".prev").click(function(){ //点击pre按钮向跳转
        box.navigate.prev();
        return false;
    });

    $(".defP").click(function(){ //点击defP按钮返回默认角度
        box.perspective.default();
        return false;
    });

    $(".trP").click(function(){ //点击trP按钮返回右上方角度
        box.perspective.topRight();
        return false;
    });

    $(".tlP").click(function(){ //点击tlP按钮返回左上方角度
        box.perspective.topLeft();
        return false;
    });

    for(count=1; count<=7; count++){//定义翻页数字按钮
        $(".goto").append('<a href="#" class="goto'+count+'" pos="'+(count-1)+'"> '+count+' </a>');
        $(".goto"+count).click(function(){
            box.navigate.goTo($(this).attr("pos"));
            return false;
        });
    }

});//]]>

参数

名称 类型 默认值 描述
manifest Array Null 图片路径列表
imagePath String Null 指定图片所在路径
dx Number 300 图片的水平间距
dz Number 300 图片的垂直间距
deltaRotation Number 45 没有被激活的图片的旋转角度
planeSize Number 500 激活面板的宽度
alphaBackground Boolean true 设置背景是否透明
antialias Boolean true 抗锯齿设置
progress
light Hex "#ff0000" 设置进度条亮光面的颜色
ambientLight Hex "#ffffff" 设置进度条环境光的颜色
position Array [0,100,0] 设置进度条的位置
stats Boolean false 设置是隐藏还是显示

事件

名称 触发时机
onImageLoadProgress 调用图片的线程
onImageLoadComplete 图片加载完成
onImageLoad 图片开始加载
onNavigateComplete 导航结束。参数:激活的面板,类型为对象

方法

名称 描述
.next() 旋转木马旋转到下一图片
.prev() 旋转木马旋转到上一图片
<object>.goTo(<index>);

旋转木马旋转到指定的图片。参数:index,类型:Number。图片列表中元素的序号,从0开始计数

$(function(){
    var box = $(".box").ig3js({
        manifest: [
            {src:"image1.jpg", id:"image1"},
            {src:"image2.jpg", id:"image2"},
            {src:"image3.jpg", id:"image3"},
        ],
        imagePath: 'images/',
    });
    box.navigate.goTo(2);//跳转到第三张图片
});

.perspective.defaul(); 设置旋转木马的3D透视为默认透视。
.perspective.topRight() 设置旋转木马的3D透视点在右边。
.perspective.topLeft() 设置旋转木马的3D透视点在左边。

转载请注明:jQ酷 » jQuery 3d图片旋转木马特效插件Image Gallery Threejs

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。