首页 > 代码库 > 原生js颗粒页换图效果
原生js颗粒页换图效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>颗粒翻转</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 700px;
height: 400px;
background: url("images/img_tabs/1.jpg");
margin: 50px auto;
position: relative;
}
</style>
<script src="http://www.mamicode.com/move.js"></script>
<script>
window.onload=function(){
var oDiv=document.getElementById(‘box‘);
var oInp=document.getElementById(‘btn1‘);
var C=8; //列数
var R=5; //行数
var W=oDiv.offsetWidth/C; //每个span的宽度
var H=oDiv.offsetHeight/R; //每个span的高度
//创建span
for(var i=0;i<R;i++){ //循环所有行
for(var j=0;j<C;j++){ //循环每一行中的每一个
var oSpan=document.createElement(‘span‘);
oSpan.style.width=W+‘px‘;
oSpan.style.height=H+‘px‘;
oSpan.style.position=‘absolute‘;
oSpan.style.top=i*H+‘px‘;
oSpan.style.left=j*W+‘px‘;
oSpan.style.backgroundImage=‘url("images/img_tabs/0.jpg")‘;
oSpan.style.backgroundPosition=-j*W+‘px -‘+i*H+‘px‘;
oSpan.c=j;
oSpan.r=i;
oDiv.appendChild(oSpan);
}
}
var iNow=0;
oInp.onclick=function() {
iNow++;
var aSpan = oDiv.children;
if(iNow%3==0){
oDiv.style.backgroundImage=‘url("images/img_tabs/2.jpg")‘;
}else{
oDiv.style.backgroundImage=‘url("images/img_tabs/‘+(iNow%3-1)+‘.jpg")‘;
}
for(var i=0;i<aSpan.length;i++){
(function(index){
setTimeout(function(){
aSpan[index].style.backgroundImage=‘url("images/img_tabs/‘+iNow%3+‘.jpg")‘;
aSpan[index].style.opacity=0;
move(aSpan[index],{‘opacity‘:1});
},(aSpan[index].c+aSpan[index].r)*200);
})(i);
}
}
};
</script>
</head>
<body>
<input type="button" value="http://www.mamicode.com/换图" id="btn1"/>
<div id="box">
</div>
</body>
</html>
原生js颗粒页换图效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。