滚轮放大图片
开发工具与关键技术: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";
}