您的位置：首页 > Web前端 > JQuery

jQuery插件reel3D展示

2015-08-06 16:05 751 查看

jQuery reel插件：产品3D展示效果

例子：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>3D展示效果</title>

<style>

body{width:100%; height:100%;}

.main{width:512px; height:512px; margin:0 auto; border:1px solid red;}

</style>

</head>

<body>

<div class="main">

    <img src="./mobile.jpg" id="show">

</div>

<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="./jquery.reel.min.js"></script>

<script>

$(function(){

    //3D展示效果

    $('#show').reel({

        area:'.main',

        frames:36,

        frame:1,

        footage:6,

        dist:80,

        wheelable:false

    });

});

</script>

</body>

</html>

图片的数据源可以有三种：

1、使用一张包含多个角度图像的图片；（消耗内存，不需要指定图片路径，只需要放在预览图片同一个目录下，命名格式为xxx-reel.png）

2、采用多张不同角度的图片；（需要设置图片参数，path:'images/...'图片保存的相对目录，images:['img_1.gif','img_2.gif','img_3.gif']直接赋给数组）

3、采用一张全景图片；

其它参数配置文档：http://lhdst-163-com.iteye.com/blog/1326788

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航