mladenilic/threesixty.js：将图像精灵转换为360度视图

267

项目介绍

mladenilic/threesixty.js 是一个托管在 GitHub 上的开源项目，主要使用 JavaScript 编写，目前获得 267 个 Star、42 次 Fork。

仓库全名: mladenilic/threesixty.js
Star 数: 267
Fork 数: 42
未关闭 Issue: 7

README 摘要

ThreeSixty.js Turn image sprite into 360 degree image. View on Codepen - http://codepen.io/mladenilic/full/zKOpmg/ Install ThreeSixty is available as an ES6 module via NPM package Then you can import it with Or, you can also use it via a CDN Dependencies No dependencies! Written in plain javascript. Example Options Array of images As an alternative to sprite image, ThreeSixty also supports using array of images: In…

完整内容见 GitHub 原始 README 或本页。

常见问题

threesixty.js 用什么语言开发？

主要使用 JavaScript 编写，目前有 267 个 Star。

如何获取 threesixty.js 的源码？

可以直接克隆仓库：git clone https://github.com/mladenilic/threesixty.js.git，默认分支为 master；安装与运行步骤见仓库 README。

threesixty.js 最近还在维护吗？

仓库最近一次更新为 2024年9月17日，当前有 7 个未关闭 Issue；Star 数为 267，可作为社区活跃度的参考。

关于

GitHub 原始描述（英文）

Transforms image sprite into 360 image view. Vanilla js, no dependancies.

描述取自 GitHub 官方 API，保持仓库作者书写的原文。

简要分析

热度分

359

价值分

173

活跃状态

活跃

360 360-image-slider image javascript js slider slideshow vanillajs

GitHub

语言占比

JavaScript

贡献者

README

ThreeSixty.js

Turn image sprite into 360 degree image.

View on Codepen - http://codepen.io/mladenilic/full/zKOpmg/

Install

ThreeSixty is available as an ES6 module via NPM package

npm i @mladenilic/threesixty.js

Then you can import it with

import ThreeSixty from '@mladenilic/threesixty.js';

Or, you can also use it via a CDN

<script src="https://cdn.jsdelivr.net/npm/@mladenilic/threesixty.js/dist/threesixty.js"></script>

Dependencies

No dependencies! Written in plain javascript.

Example

const threesixty = new ThreeSixty(document.getElementById('threesixty'), {
  image: 'images/example.jpg',
  count: 19,
  perRow: 4,
  prev: document.getElementById('prev'),
  next: document.getElementById('next')
});

threesixty.play();

Options

{
  // Source image url
  image: 'images/example.jpg', // Also supports passing an array of images

  // Sprite options (If array of images are provided, these options are ignored)
  count: 30,                   // Total number of images. Default: 0
  perRow: 5,                   // Number of images per row. Default: 0

  // Width & Height
  width: 300,  // Image width. Default 300
  height: 300, // Image height. Default 300

  // Navigation
  prev: document.getElementById('prev'), // Previous button element. Default: null
  next: document.getElementById('next'), // Next button element. Default: null
  keys: true,         // Rotate image on arrow keys. Default: true
  draggable: true,    // Rotate image by dragging. Default: true
  swipeable: true,    // Rotate image by swiping on mobile screens. Default: true
  dragTolerance: 10,  // Rotation speed when dragging. Default: 10
  swipeTolerance: 10, // Rotation speed when swiping. Default: 10
  swipeTarget: document.getElementById('wrapper'), // Element which will listen for drag/swipe events. Default: Image container

  // Rotation settings
  speed: 100,     // Rotation speed during 'play' mode. Default: 10
  inverted: false // Inverts rotation direction
}

Array of images

As an alternative to sprite image, ThreeSixty also supports using array of images:

new ThreeSixty(document.getElementById('threesixty'), {
  image: [
    'images/example-1.jpeg',
    'images/example-2.jpeg',
    'images/example-3.jpeg',
    ...
  ],

  ...
})

In this case options count and perRow are ignored.

Methods

Single frame rotation:

threesixty.next();
threesixty.prev();

Focus n-th frame:

threesixty.goto(index);

threesixty.goto(0); // Reset position
threesixty.goto(1); // Focus 1st frame
threesixty.goto(-1); // Focus last frame

Image rotation:

// Start rotation
threesixty.play();

// Rotate in oposite direction
threesixty.play(true);

// Rotate only 2 times, then stop automatically
threesixty.play(false, 2);

// Stop rotation
threesixty.stop();

// Play/Stop rotation
threesixty.toggle();

Clean up registered events:

threesixty.destroy();

Contributions

All contributions are welcome. To get started, clone repo and npm start

Licence

Licensed under the MIT license.

threesixty.js