js-cloudimage-360-view（360度查看图片）

一个可以360度旋转观看图片的 JS 库，用于在网页上展示商品。

效果

360度查看图片.gif

代码

  1. <!DOCTYPE html>
  2. <html lang='en'>
  3.   <head>
  4.     <meta charset='UTF-8'>
  5.     <title>Document</title>
  6.     <style>
  7.       .view-360 {
  8.         width: 600px;
  9.         height: 300px;
  10.         margin: 0 auto;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <div class="view-360">
  16.       <div
  17.            class="cloudimage-360"
  18.            data-folder="./images/360/"
  19.            data-filename="iris-{index}.jpeg"
  20.            data-amount="13"
  21.            ></div>
  22.     </div>
  23.     <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script>
  24.   </body>
  25. </html>

react 中使用

（data-folder 属性必须是线上文件地址）
引入 js 文件：https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js

  1. import React from 'react';
  2. import styles from './index.less';
  4. const View360 = () => {
  5.   return (
  6.     <div
  7.       className="cloudimage-360"
  8.       data-folder="https://scaleflex.cloudimg.io/crop/1920x700/n/https://scaleflex.airstore.io/demo/360-car/"
  9.       data-filename="iris-{index}.jpeg"
  10.       data-amount="36"
  11.     ></div>
  12.   );
  13. };
  15. export default View360;

panolens.js（一个360度全景照片浏览的 JS 库）