以下是 js 3D图片叠加旋转切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js 3D图片叠加旋转切换</title>
<style type="text/css">
body{margin:0px;padding:0px; font-size:12px;}
#top{width:100%;height:139px;float:left;background:url(images/top.jpg) no-repeat center;position:relative;}
#top .small{width:634px;height:56px;position:absolute;top:56px;left:50%;display:inline;margin:0 0 0 -310px;}
#top .small ul{margin:0;padding:0px;}
#top .small li{width:65px;height:48px;float:left;border:1px solid #000;display:inline;margin:3px 0 0 3px;padding:0px;filter:alpha(opacity=40);opacity:0.4;cursor:pointer;}
#top .small li.hove{filter:alpha(opacity=100);opacity:1;}
#box{width:100%;height:602px;float:left;background:url(images/banna.jpg) no-repeat center;overflow:hidden;position:relative;}
#box .bg{width:100%;height:340px;background:#000;filter:alpha(opacity=70); opacity:0.7; position:absolute; top:132px; left:0px;}
#list{width:1004px;height:446px;position:absolute;top:75px;left:50%;display:inline;margin-left:-502px;}
#list ul {margin:0px;padding:0px; float:left;}
#list li{width:100px;border:3px solid #000;position:absolute;list-style-type:none;overflow:hidden;cursor:pointer;}
#list li img{width:100%;height:100%;vertical-align:top;}
#list li div{width:100%;height:100%;background:#000;filter:alpha(opacity=70); opacity:0.7; position:absolute; z-index:1; top:0px; left:0px;}
#list li .b_tit{width:100%;height:120px;position:absolute; z-index:1; bottom:-100%; left:0px;margin:0px;padding:0px;}
#list li .opacity{width:100%;height:120px;background:#000;filter:alpha(opacity=80); opacity:0.8; position:absolute; z-index:1; bottom:0px; left:0px;}
#list li .tit{width:324px;height:120px;padding:0 10px;position:absolute; z-index:2; bottom:0px; left:0px;}
#list li .tit span{width:100%;height:30px;font-weight:normal;float:left;text-align:left;line-height:30px;color:#fff;border-bottom:1px solid #2f2f2c;margin:0px;padding:0px;}
#list li .tit span em{color:#ba0707;font-style:normal;float:none;}
#list li .tit em{color:#fff;line-height:25px;float:left;margin:0px;padding:5px 0;font-style:normal;}
#list a{width:39px;height:80px;background:url(images/btn.png) no-repeat;text-decoration:none;position:absolute;z-index:20;top:190px;}
#list a.prev{background-position:0 0; left:-54px;}
#list a.next{background-position:-39px 0; right:-100px;}
#bottom{width:100%;height:200px;float:left;background:url(images/bottom.jpg) no-repeat center;position:relative;}
#bottom .title{width:100%;height:60px;line-height:60px;color:#fff;text-align:center;position:absolute;left:0px;bottom:0px;font-family:Verdana;}
#bottom .title a{background:#666666;text-decoration:none;color:#fff; padding:3px 5px;}
</style>
<script type="text/javascript">
window.onload = function(){
var oBut = document.getElementById('list');
var oTop = document.getElementById('top');
var oTli = oTop.getElementsByTagName('li');
var aLi = oBut.getElementsByTagName('li');
var aA = oBut.getElementsByTagName('a');
var aP = getClass(oBut, 'b_tit');
var oSmall = getClass(oTop, 'small')[0];
var i = iNow = 0;
var timer = null;
var aSort = [];
var aPosition = [
{width:344,height:440,top:0,left:352,zIndex:10},
{width:260,height:332,top:56,left:148,zIndex:8},
{width:204,height:260,top:92,left:0,zIndex:6},
{width:140,height:180,top:132,left:148,zIndex:4},
{width:110,height:140,top:172,left:232,zIndex:2},
{width:110,height:140,top:172,left:708,zIndex:2},
{width:140,height:180,top:132,left:770,zIndex:4},
{width:204,height:260,top:92,left:844,zIndex:6},
{width:260,height:332,top:56,left:640,zIndex:8}
]
for(i=0;i<oTli.length;i++){
oTli[i].index = i;
myAddEvent(oTli[i], 'mouseover', function(){
startMove(this, {opacity:100});
})
myAddEvent(oTli[i], 'mouseout', function(){
if(this.className != 'hove')startMove(this, {opacity:40});
})
myAddEvent(oTli[i], 'click', function(){
iNow = this.index;
tab();
})
}
for(i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].style.width = aPosition[i].width +'px';
aLi[i].style.height = aPosition[i].height +'px';
aLi[i].style.top = aPosition[i].top +'px';
aLi[i].style.left = aPosition[i].left +'px';
aLi[i].style.zIndex = aPosition[i].zIndex;
aSort[i] = aPosition[i];
myAddEvent(aLi[i], 'mouseover', function(){
var oDiv = this.getElementsByTagName('div')[0];
startMove(oDiv, {opacity:0});
if(this.style.width == '344px'){
startMove(aP[this.index], {bottom:0});
}
});
myAddEvent(aLi[i], 'mouseout', function(){
if(this.style.width == '344px'){
startMove(aP[this.index], {bottom:-120});
}else{
var oDiv = this.getElementsByTagName('div')[0];
startMove(oDiv, {opacity:75});
}
});
myAddEvent(aLi[i], 'click', function(){
var iSort = this.index;
iNow = this.index;
Sort();
for(i=0;i<iSort;i++){
aSort.unshift(aSort.pop());
}
sMove();
});
}
myAddEvent(aA[0], 'click', function(){
aSort.unshift(aSort.pop());
sMove();
setInter();
});
myAddEvent(aA[1], 'click', function(){
aSort.push(aSort.shift());
sMove();
iNow--;
if(iNow<0)iNow = aLi.length - 1;
tab();
});
oSmall.onmouseover = oBut.onmouseover = function(){
clearInterval(timer);
};
oSmall.onmouseout = oBut.onmouseout = function(){
clearInterval(timer);
timer = setInterval(setInter,5000);
};
timer = setInterval(setInter,5000);
function setInter(){
iNow++;
if(iNow>aLi.length-1)iNow = 0;
tab();
}
function tab(){
for(i=0;i<oTli.length;i++)oTli[i].className = '',startMove(oTli[i], {opacity:40});
oTli[iNow].className = 'hove';
startMove(oTli[iNow], {opacity:100})
var iSort = iNow;
Sort();
for(i=0;i<iSort;i++){
aSort.unshift(aSort.pop());
}
sMove();
}
function Sort(){
for(i=0;i<aLi.length;i++){
aSort[i] = aPosition[i];
}
}
function sMove(){
for(i=0;i<aLi.length;i++){
var oDiv = aLi[i].getElementsByTagName('div')[0];
startMove(oDiv, {opacity:75});
startMove(aLi[i], aSort[i], function(){one();});
aLi[i].className = '';
}
aLi[iNow].className = 'hove';
}
function one(){
for(i=0;i<aLi.length;i++){
if(aLi[i].style.width == '344px'){
var oDiv = aLi[i].getElementsByTagName('div')[0];
startMove(oDiv, {opacity:0});
}
}
}
one();
};
function getClass(oParent, sClass){
var aElem = document.getElementsByTagName('*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
}
function myAddEvent(obj, sEvent, fn){
if(obj.attachEvent){
obj.attachEvent('on' + sEvent, function(){
fn.call(obj);
});
}else{
obj.addEventListener(sEvent, fn, false);
}
}
function startMove(obj, json, fnEnd){
if(obj.timer)clearInterval(obj.timer);
obj.timer = setInterval(function (){
doMove(obj, json, fnEnd);
}, 30);
}
function getStyle(obj, attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function doMove(obj, json, fnEnd){
var iCur = 0;
var attr = '';
var bStop = true;
for(attr in json){
attr == 'opacity' ? iCur = parseInt(100*parseFloat(getStyle(obj, 'opacity'))) : iCur = parseInt(getStyle(obj, attr));
if(isNaN(iCur))iCur = 0;
if(navigator.userAgent.indexOf("MSIE 8.0") > 0){
var iSpeed = (json[attr]-iCur) / 3;
}else{
var iSpeed = (json[attr]-iCur) / 5;
}
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(parseInt(json[attr])!=iCur)bStop = false;
if(attr=='opacity'){
obj.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")";
obj.style.opacity = (iCur + iSpeed) / 100;
}else{
attr == 'zIndex' ? obj.style[attr] = iCur + iSpeed : obj.style[attr] = iCur + iSpeed +'px';
}
}
if(bStop){
clearInterval(obj.timer);
obj.timer = null;
if(fnEnd)fnEnd();
}
}
</script>
</head>
<body>
<div id="top">
<div class="small">
<ul>
<li class="" style="opacity: 0.4; "><img src="./images/01.jpg"></li>
<li class="" style="opacity: 0.4; "><img src="./images/02.jpg"></li>
<li style="opacity: 0.96; " class="hove"><img src="./images/03.jpg"></li>
<li style="opacity: 0.4; " class=""><img src="./images/04.jpg"></li>
<li style="opacity: 0.4; " class=""><img src="./images/05.jpg"></li>
<li style="opacity: 0.4; " class=""><img src="./images/06.jpg"></li>
<li style="opacity: 0.4; " class=""><img src="./images/07.jpg"></li>
<li style="opacity: 0.4; " class=""><img src="./images/08.jpg"></li>
<li style="opacity: 0.4; " class=""><img src="./images/09.jpg"></li>
</ul>
</div>
</div>
<div id="box">
<div class="bg"></div>
<div id="list">
<ul>
<li style="width: 204px; height: 260px; top: 92px; left: 844px; z-index: 6; " class="">
<img src="./images/01(1).jpg">
<div style="opacity: 0.71; "></div>
<p class="b_tit" style="bottom: -120px; ">
<span class="opacity"></span>
<span class="tit">
<span>蒙其·D·路飞<em> 草帽海贼团【船长】</em></span>
<em>恶魔果实：橡胶果实<br>悬赏：3千万（可可亚西村事件）→1亿（阿拉巴斯坦事件）→3亿（司法岛事件)→4亿（顶上战争后）</em>
</span>
</p>
</li>
<li style="width: 260px; height: 332px; top: 56px; left: 640px; z-index: 8; " class="">
<img src="./images/02(1).jpg">
<div style="opacity: 0.21; "></div>
<p class="b_tit">
<span class="opacity"></span>
<span class="tit">
<span>罗罗诺亚·索隆<em> 草帽海贼团【剑士】</em></span>
<em>悬赏：6千万（阿拉巴斯坦事件）→1亿2000万（司法岛事件）</em>
</span>
</p>
</li>
<li style="width: 344px; height: 440px; top: 0px; left: 352px; z-index: 10; " class="hove">
<img src="./images/03(1).jpg">
<div style="opacity: 0; "></div>
<p class="b_tit" style="bottom: -120px; ">
<span class="opacity"></span>
<span class="tit">
<span>娜美<em> 草帽海贼团【航海士】</em></span>
<span>悬赏：1600万（司法岛事件）</span>
</span>
</p>
</li>
<li style="width: 260px; height: 332px; top: 56px; left: 148px; z-index: 8; " class="">
<img src="./images/04(1).jpg">
<div style="opacity: 0.71; "></div>
<p class="b_tit">
<span class="opacity"></span>
<span class="tit">
<span>乌索普<em> 草帽海贼团【狙击手】</em></span>
<em>悬赏：3000万（司法岛事件）</em>
</span>
</p>
</li>
<li style="width: 204px; height: 260px; top: 92px; left: 0px; z-index: 6; " class="">
<img src="./images/05(1).jpg">
<div style="opacity: 0.71; "></div>
<p class="b_tit" style="bottom: -120px; ">
<span class="opacity"></span>
<span class="tit">
<span>香吉士<em> 草帽海贼团【厨师】</em></span>
<em>悬赏：7700万（司法岛事件）</em>
</span>
</p>
</li>
<li style="width: 140px; height: 180px; top: 132px; left: 148px; z-index: 4; " class="">
<img src="./images/06(1).jpg">
<div style="opacity: 0.71; "></div>
<p class="b_tit">
<span class="opacity"></span>
<span class="tit">
<span>托尼托尼·乔巴<em> 草帽海贼团【船医】</em></span>
<em>恶魔果实：动物系人人果实<br>悬赏：50贝利（司法岛事件）</em>
</span>
</p>
</li>
<li style="width: 110px; height: 140px; top: 172px; left: 232px; z-index: 2; " class="">
<img src="./images/07(1).jpg">
<div style="opacity: 0.71; "></div>
<p class="b_tit">
<span class="opacity"></span>
<span class="tit">
<span>弗兰奇<em> 草帽海贼团【船匠】</em></span>
<em>悬赏：4400万贝利（司法岛事件）</em>
</span>
</p>
</li>
<li style="width: 110px; height: 140px; top: 172px; left: 708px; z-index: 2; " class="">
<img src="./images/08(1).jpg">
<div style="opacity: 0.71; "></div>
<p class="b_tit">
<span class="opacity"></span>
<span class="tit">
<span>布鲁克<em> 草帽海贼团【音乐家】</em></span>
<em>恶魔果实：超人系黄泉果实<br>悬赏：3300万贝利</em>
</span>
</p>
</li>
<li style="width: 140px; height: 180px; top: 132px; left: 770px; z-index: 4; " class="">
<img src="./images/09(1).jpg">
<div style="opacity: 0.71; "></div>
<p class="b_tit">
<span class="opacity"></span>
<span class="tit">
<span>妮可·罗宾<em> 草帽海贼团【考古学家】</em></span>
<em>恶魔果实：超人系花花果实<br>悬赏：7900万贝利（奥哈拉事件）→8000万贝利（司法岛事件）</em>
</span>
</p>
</li>
</ul>
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</body></html>
分享到QQ
分享到微博
微信扫一扫
