jQuery插件reel3D展示

最新推荐文章于 2020-09-03 14:55:36 发布

原创最新推荐文章于 2020-09-03 14:55:36 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何利用jQuery reel插件创建产品3D展示效果。通过示例代码展示如何配置和使用该插件，包括设置图片源、调整参数等。支持三种不同的图片数据源方式，提供丰富的展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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