2021-02-20

总结

  前几天前端第二次考核结束了，最近太放松了没怎么学习，当然也有些家庭的原因。明天又星期天了，练习算法，想想已经很久没练习算法了，蓝桥杯就要开始了，不能让300元白报名啊，明天真的要认真练习算法了。不能再颓废了。
  再考核期间做了一些好玩的东西在这里展示以下。

1. 旋转轮播图

  当鼠标放上时图片旋转。

  html代码。

  css代码。css文件为new_file.css。

body{
	perspective:1000px;/*透视效果*/
}
section{
	width:300px;
	height:200px;
	margin: 100px auto;
	background: url(../img/whitejpg.jpg) no-repeat;
	background-size: cover;
	position: relative;
	transform-style: preserve-3d;/*让父元素里面的盒子以3D效果显示*/
	transition:all 5s  linear;/*linear匀速*/
}
section:hover{
	transform: rotateY(360deg);
}
section div{
	width:100%;
	height:100%;
	background: url(../img/whitejpg.jpg) no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}
section div:nth-child(1){
	background: url(../img/ri.jpg) no-repeat;
	transform: rotateY(0deg) translateZ(400px);/*translateZ使用时要给body添加以上元素*/
}
section div:nth-child(2){
	background: url(../img/san.jpg) no-repeat;
	transform: rotateY(60deg) translateZ(400px);
}
section div:nth-child(3){
	background: url(../img/shui.jpg) no-repeat;
	transform: rotateY(120deg) translateZ(400px);
}
section div:nth-child(4){
	background: url(../img/ta.jpg) no-repeat;
	transform: rotateY(180deg) translateZ(400px);
}
section div:nth-child(5){
	background: url(../img/xing.jpg) no-repeat;
	transform: rotateY(240deg) translateZ(400px);
}
section div:nth-child(6){
	background: url(../img/lu.jpg) no-repeat;
	transform: rotateY(300deg) translateZ(400px);
}

2. grid拖拽
   
     这个目前还有BUG。
     index.html代码。

  项目.css代码。

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body,html{
	width:100%;
	height:100%;
	overflow: hidden;
}
body{
	perspective: 800px;
}
li{
	list-style: none;
}
#main{
	height:100%;
	width:100%;
	background: #023b3b url(../img/yuansu.jpg) no-repeat center;
	background-size: 100% ;
}
#List ul{
	width:120px;
	height:160px;
	border: 1px solid blue;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transform-style:preserve-3d ;
	transform: translateZ(-1500px) rotateX(0deg) rotateY(0deg);
}
#List ul li{
	width:100%;
	height:100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color:rgba(0,127,127,0.5) ;
	border:1px solid rgba(127,225,225,0.25) ;
	box-shadow: 0 0 12px rgba(0,225,225,0.5);
	line-height: 160px;
	text-align: center;
	font-weight: bold;
	cursor: default;
}

  项目.js代码。

(function() {
	/*设置125个li*/
	var length = 5 * 5 * 5,
		oUl = document.getElementById("List").children[0],
		aLi = oUl.children;
	for(var i = 0; i < length; i++) {
		var oLi = document.createElement("li");
		oLi.x = i % 5 % 25;
		oLi.y = Math.floor(i % 25 / 5);
		oLi.z = Math.floor(i / 25);
		oLi.innerHTML = "x:" + oLi.x + "y:" + oLi.y + "z:" + oLi.z;
		oUl.appendChild(oLi);
	}

	Grid();
	/*拖拽事件的添加*/
	(function() {
		var roX = 0;
		var roY = 0;
		var trZ = -1500;
		document.onselectstart = function() {
			return false;
		};
		document.ondrag = function() {
			return false;
		};
		document.onmousedown = function(event) {
			var sX = event.clientX;
			var sY = event.clientY;
			var rX = roX;
			var rY = roY;
			this.onmousemove = function(event) {
				var chaX = event.clientX - sX; //得到鼠标x位移量
				var chaY = event.clientY - sY; //得到鼠标y位移量

				rY = roY + chaX * 0.2; //设置Y度数
				rX = -(roX + chaY * 0.2); //设置X度数

				oUl.style.transform = "translateZ(" + trZ + "px) rotateY(" + rY + "deg) rotateX(" + rX + "deg)";
			};
			this.onmouseup = function() {
				roX = rX;
				roY = rY;
				this.onmousemove = null;
			}
		}
	})();
	/*设置grid布局让其横竖五个排列*/
	function Grid() {
		var disX = 300; //每个li水平方向的间隙
		var disY = 300; //每个li水垂直向的间隙
		var disZ = 300; //每个li水Z向的间隙
		for(var i = 0; i < length; i++) {
			var oLi = aLi[i];
			var x = (oLi.x - 2) * disX;
			var y = (oLi.y - 2) * disY;
			var z = (oLi.z - 2) * disZ;
			oLi.style.transform = "translate3D(" + x + "px," + y + "px," + z + "px)";
		}
	}
})();

  继续加油吧！！！