jQuery插件reel3D展示
贝研
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><!--main-->
<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
例子：
<!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><!--main-->
<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
类似资料：