🚀 Socket Launch Week Day 4:Socket MCP Adds Org Alerts, Threat Feed Review, and Package Inspection.Learn more →
3dimageview
Advanced tools
3dimageview - npm Package Compare versions
+1
-1
| { | ||
| "name": "3dimageview", | ||
| "version": "1.0.4", | ||
| "version": "1.0.5", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
+79
-79
@@ -1,79 +0,79 @@ | ||
| 模仿element-ui首页图片3d展示插件 | ||
| demo地址:http://git@github.com:zz632893783/3dImageView.git | ||
| 插件使用方法: | ||
| $ npm install 3dimageview --save-dev | ||
| 然后在需要的地方 | ||
| const imageViewFunc = require('3dimageview'); | ||
| 函数参数 | ||
| imageViewFunc({ | ||
| // 页面元素的id | ||
| id: 'app', | ||
| // 透视深度 | ||
| deep: 600, | ||
| // 变换速度(单位为毫秒) | ||
| speed: 250, | ||
| // 翻转幅度 | ||
| rotateRange: 20, | ||
| // 移动幅度 | ||
| moveRange: 0.03, | ||
| // 所插入的元素数组 | ||
| children: [{ | ||
| // 内容，也可以是'<div>123</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 | ||
| 模仿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 |
No alert changes
Improved metrics
- Total package byte prevSize
7313
19.34%No dependency changes