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-Kw1iIwfnNGNI3Sd1O9jzZK+QXfCB3Zpkoinct3VmcGsAFLuCNzoWogxJWw7cRPF4e7dRX0yycBocroCHb0Bl/Q==",
"shasum": "d4699b35080d19a0bcd7d87e0e83ae34a63efc44",
"tarball": "https://registry.npmjs.org/3dimageview/-/3dimageview-1.0.3.tgz",
"fileCount": 4,
"unpackedSize": 868,
"signatures": [
{
"keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
"sig": "MEUCIQDyObrAovnuaxTEdL/hbiAJDGm6iQsRNBgAkYwWFoSCtgIgGNfIy+sKAlecDH8rD84BbwOUoLTMo5iQuUNB851GS+0="
}
]
}Observed since 20 Oct, 19:39 UTC
No superseded metadata states collected. Unchanged observations do not create new revisions.
package_version:e52f4796f5b898a3efb8bdd58287d576c50d4d1ffaeb01f3f26975b4491f8f8f