🚀 Socket Launch Week Day 4:Socket MCP Adds Org Alerts, Threat Feed Review, and Package Inspection.Learn more →
Sign In

3dimageview

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

3dimageview - npm Package Compare versions

Comparing version
1.0.5
 to
1.0.6
+1
-1
package.json
{
"name": "3dimageview",
"version": "1.0.5",
"version": "1.0.6",
"description": "",

@@ -5,0 +5,0 @@ "main": "index.js",

+79
-79
README.md

@@ -1,79 +0,79 @@

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