Observed since 20 Oct, 19:39 UTC
No superseded metadata states collected. Unchanged observations do not create new revisions.
3dimageview
模仿element-ui首页图片3d展示插件
模仿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
Download counts and popularity will appear here as the collector receives them.
Declarations describe requirements; they are not a resolved dependency graph.
Source distribution
{
"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="
}
]
}Observed since 20 Oct, 19:39 UTC
No superseded metadata states collected. Unchanged observations do not create new revisions.
package_version:9c90a63e995d4749dba74c067bd0cd8e6ef183f3b8275daa0e20b5a28bbe285d