3dimageview - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

lib/imageView.js

 module.exports = function (option) {
 	let outBox = document.getElementById(option.id);
+	let containerSize = {
+		width: parseInt(window.getComputedStyle(outBox).width),
+		height: parseInt(window.getComputedStyle(outBox).height)
+	}
+	let container = document.createElement('div');
+	container.setAttribute('id', 'imageViewContainer' + new Date().getTime());
+	container.style = 'width: 100%; height: 100%; position: relative;';
 	outBox.innerHTML = '';
-	let container = document.createElement('div');
-	container.setAttribute('style', 'position: relative; width: 100%; height: 100%;');
+	let children = option.children;
+	for (let i = 0; i < children.length; i++) {
+		let div = document.createElement('div');
+		div.innerHTML = children[i].content;
+		div.style.position = 'absolute';
+		let speed = option.speed ? 0.25 : (parseFloat(option.speed / 1000) <= 0 ? 0.25 : parseFloat(option.speed / 1000));
+		speed = speed ? speed : 0.25;
+		div.style.transition = 'all ' + speed + 's';
+		div.style.transform = 'perspective(' + option.deep + 'px) rotateY(' + children[i].style.rotateY + 'deg)';
+		for (let styleKey in children[i].style) {
+			div.style[styleKey] = children[i].style[styleKey]
+		}
+		children[i].dom = div;
+		container.appendChild(children[i].dom);
+	}
+	for (let i = 0; i < children.length; i++) {
+		if (!children[i].style.left && children[i].style.right) {
+			children[i].style.left = containerSize.width - parseInt(children[i].style.right) - parseInt(children[i].style.width);
+		}
+		if (!children[i].style.top && children[i].style.bottom) {
+			children[i].style.top = containerSize.height - parseInt(children[i].style.bottom) - parseInt(children[i].style.height);
+		}
+		children[i].center = {
+			x: (function (obj) {
+				if (!obj.style.left && obj.style.right) {
+					return containerSize.width - parseInt(obj.style.right) - parseInt(children[i].style.width) / 2
+				} else {
+					return parseInt(obj.style.left) + parseInt(children[i].style.width) / 2
+				}
+			})(children[i]),
+			y: (function (obj) {
+				if (!obj.style.top && obj.style.bottom) {
+					return containerSize.height - parseInt(obj.style.bottom) - parseInt(children[i].style.height) / 2
+				} else {
+					return parseInt(obj.style.top) + parseInt(children[i].style.height) / 2
+				}
+			})(children[i])
+		}
+	}
+	container.addEventListener('mousemove', function (event) {
+		let moveX = event.x;
+		let moveY = event.y;
+		for (let i = 0; i < children.length; i++) {
+			let rotateY = parseInt(Math.log10(Math.abs(children[i].center.x - moveX) / (parseInt(children[i].style.width)) + 1) * option.rotateRange * (children[i].center.x - moveX < 0 ? -1 : 1));
+			children[i].dom.style.transform = 'perspective(' + option.deep + 'px) rotateY(' + rotateY + 'deg)';
+			let rotateX = parseInt(Math.log10(Math.abs(children[i].center.Y - moveY) / (parseInt(children[i].style.height)) + 1) * option.rotateRange * (children[i].center.y - moveY < 0 ? -1 : 1));
+			children[i].dom.style.transform = 'perspective(' + option.deep + 'px) rotateX(' + rotateX + 'deg)';
+			children[i].dom.style.left = parseInt(parseInt(children[i].style.left) + (containerSize.width / 2 - moveX) / (containerSize.width / 2) * Math.abs(children[i].center.x - containerSize.width / 2) * option.moveRange) + 'px';
+			children[i].dom.style.top = parseInt(parseInt(children[i].style.top) + (containerSize.height / 2 - moveY) / (containerSize.height / 2) * Math.abs(children[i].center.y - containerSize.height / 2) * option.moveRange) + 'px';
+		}
+	});
+	container.addEventListener('mouseout', function () {
+		for (let i = 0; i < children.length; i++) {
+			children[i].dom.style.transform = 'perspective(' + option.deep + 'px) rotateY(0deg)';
+			children[i].dom.style.left = children[i].style.left;
+			children[i].dom.style.top = children[i].style.top;
+		}
+	});
 	outBox.appendChild(container);
-};
+}

package.json

 {
   "name": "3dimageview",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -1,1 +0,79 @@
-模仿element-ui首页图片3d展示插件
+模仿element-ui首页图片3d展示插件
+demo地址:http://[e-mail]: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

Fixed alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6128

605.99%

Lines of code

70

900%

Number of lines in readme file

79

7800%

Number of medium supply chain risk alerts

0

-100%

No dependency changes