滚轮放大图片

滚轮放大图片

开发工具与关键技术：DW /css3+js;
作者：多事之秋
撰写时间：2019年2月16日

因为某些原因，撰写时间和发表时间不一致，请原谅；
用简单代码做一个360度旋转特效

首先创建一个 html

<div class="container">
		<div id="box" style="left: 0px;">
			<li><img src="img/323152.jpg" alt=""></li>
			<li><img src="img/311533.jpg" alt="" ></li>
			<li><img src="img/322489.jpg" alt="" class="on"></li>
			<li><img src="img/323940.jpg" alt=""  ></li>
			<li><img src="img/323913.jpg" alt="" ></li>
			<li><img src="img/323662.jpg" alt=""></li>
			<li><img src="img/324138.jpg" alt=""></li>
		</div>
	</div>

然后添加元素属性，CSS代码为：

@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
body{
	background: #1B0C0C;
	overflow: hidden;
}
.container{
	width: 1440px;
	height: 100vh;
	display: flex;
	margin: auto;
	overflow: hidden;
	position: relative;
}
#box {
	width: 2880px;
	height: 180px;
	margin: auto;
	position: absolute;
	top: 40%;
}
li{
	width: 288px;
	height: 180px;
	float: left;
	list-style: none;
	display: flex;
}
img{
	width: 192px;
	height: 120px;
	margin: auto;
	opacity: 0.4;
	
}
.on{
	width: 288px;
	height: 180px;
	opacity: 1;
}

Js的代码：

// JavaScript Document
var ind=2;

//滚轮事件
window.onmousewheel=wheel;
function wheel(ev){
	/*if(transfor){
		return;
	}*/
	var ev=ev ||event;
	var b=false;
	if(ev.wheelDelta){
		b=ev.wheelDelta>0 ? true : false;
	}
	else{
		b=ev.detail < 0 ?true : false;
	}
	if(b){
		if(ind===6){
			alert("没有了");
			return;
		}
		animation1(-288);
		ind++;
		show();
	}
	else{
		if(ind===0){
			alert("没有了");
			return;
		}
		animation1(288);
		ind--;
		show();
	}
}

	function show(){
		var img=document.getElementById("box").getElementsByTagName("img");
		for(var i=0; i<img.length; i++){
			if(img[i].className==='on'){
				img[i].className='';
			break;
			}
		}
		img[ind].className='on';
	};
	function animation1(offset){
		var box= document.getElementById("box");
		box.style.left= parseInt(box.style.left) + offset+"px";
	}