Catalog npm
Back to packageRELEASE DETAILS

1.0.2

npm

3dimageview

模仿element-ui首页图片3d展示插件

3d
Published3 Mar 2018
Direct dependencies0
Transitive dependenciesNot calculated

README

Current package documentation

模仿element-ui首页图片3d展示插件
  demo地址: https://github.com/zz632893783/3dImageView
插件使用方法:
  $ npm install 3dimageview --save-dev
然后在需要的地方
  const imageViewFunc = require('3dimageview');
函数参数
  imageViewFunc({
    // 页面元素的id
    id: 'app',
    // 透视深度
    deep: 600,
    // 变换速度(单位为毫秒)
    speed: 250,
    // 翻转幅度
    rotateRange: 20,
    // 移动幅度
    moveRange: 0.03,
    // 所插入的元素数组
    children: [{
      // 内容,也可以是div等标签的字符串
      content: '1',
      // 容器的样式
      style: {
        // 容器的宽度
        width: '120px',
        // 容器的高度
        height: '70px',
        // 背景色
        backgroundColor: '#409eff',
        // 距离外层容器左侧宽度
        left: '30px',
        // 距离外层容器右侧宽度
        right: '15px',
        // 容器的上下层级
        zIndex: 5
      }
    }, {
      content: '2',
      style: {
        width: '50px',
        height: '45px',
        backgroundColor: '#67c23a',
        left: '300px',
        top: '15px',
        zIndex: 4,
        boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
        overflow: 'hidden',
        borderRadius: '4px',
        fontSize: '20px',
        textAlign: 'center',
        lineHeight: '45px',
        color: 'white'
      }
    }, {
      content: '3',
      style: {
        width: '400px',
        height: '300px',
        backgroundColor: '#E6A23C',
        left: '100px',
        top: '50px',
        zIndex: 0,
        boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
        overflow: 'hidden',
        borderRadius: '4px',
        fontSize: '50px',
        textAlign: 'center',
        lineHeight: '300px',
        color: 'white'
      }
    }]
  })
若想预览demo,clone项目之后,
  $ cnpm install
安装所有模块之后
  $ webpack-dev-server
浏览器中输入
  http://localhost:8080

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 0

Native requirements
0 direct targetsNot calculated transitive count
No declared dependencies in this collected response

Declarations describe requirements; they are not a resolved dependency graph.

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-j8r3kxQk5SnrIPW59tW2k0BNNAe3jnQ3WvoOOFAXQ5mnK2dhe0gER5/0DtEpEzSLeOAEggEm73DnQzI6GUIESw==",
  "shasum": "784f1e1c86ba7418ace18f64e5dea558cb7f9dd7",
  "tarball": "https://registry.npmjs.org/3dimageview/-/3dimageview-1.0.2.tgz",
  "fileCount": 4,
  "unpackedSize": 671,
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEUCIQD+cxLddnZqvDr821tJzK/lP/bWJLtbpEaycjPVqWZLVgIgaJBLt6elmmdHl7g+/8Ghs6R8Wrlrg2wOYHnkbIRlxcE="
    }
  ]
}

Repository

PENDING
zz632893783/3dimageview

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 19:39 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:9c90a63e995d4749dba74c067bd0cd8e6ef183f3b8275daa0e20b5a28bbe285d

Other collected versions

1.0.64 Mar1.0.54 Mar1.0.43 Mar1.0.33 Mar1.0.13 Mar1.0.03 MarView all collected versions →