很好看的网页动画倒影效果

最新推荐文章于 2023-09-11 22:39:46 发布

dawn

最新推荐文章于 2023-09-11 22:39:46 发布

阅读量560

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/dawn0718/article/details/8557348

版权

HTML+CSS 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

　　今天下午完成了一个比较好看的倒影效果，图片的轮动并且有倒影效果。

　　原理虽然简单，可JavaScript可真是折磨人啊！

　　下面是代码和演示图：

<html>
<head>
<title>带倒影的动画效果模拟</title>
<style type="text/css">
 body           {text-align:center;
   topmargin:0;
   leftmargin:0;
   background:yellow;}

        #dawn0919      {position:relative;
   text-align:center;
   topmargin:0;
   leftmargin:0;
   background:red;
   width:1024;
   height:600;
   border:0;
   overflow:hidden;
   z-index:1;}

 #dawn0718 {position:absolute;
    top:20;
    left:0;
    width:1024;
    height:300;
   background:blue;
   overflow:hidden;
   }

 #dawn0401 {position:absolute;
    top:320;
    left:0;
    width:1024;
    height:300;
   background:green;
   overflow:hidden;
   }
 img  {width:100%;
   height:100%;
   }

 .TopSetOther   {position:relative;
   margin-left:9px;
   marginr-ight:9px;
   float:left;
   width:60px;
   height:40px;
   top:260px;
   }

 .TopSetMid     {position:relative;
   margin-left:9px;
   marginr-ight:9px;
   float:left;
   width:400px;
   height:300px;
   top:0px;
   }

 .BottomSetOther{position:relative;
   margin-left:9px;
   marginr-ight:9px;
   float:left;
   width:60px;
   height:40px;
   top:0px;
   filter:alpha(opacity=30) flipv();
   }
 .BottomSetMid  {position:relative;
   margin-left:9px;
   marginr-ight:9px;
   float:left;
   width:400px;
   height:300px;
   top:0px;
   filter:alpha(opacity=30) flipv();
   }

</style>


</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div ID=dawn0919>
 <div ID=dawn0718>
  <span class=TopSetOther ID=TopBlock1 onmouseover="SetID(1)" onmouseout="TimerStart()"><img ID=PicTop1 src="pic/1.jpg"/></span>
  <span class=TopSetOther ID=TopBlock2 onmouseover="SetID(2)" onmouseout="TimerStart()"><img ID=PicTop2 src="pic/2.jpg"/></span>
  <span class=TopSetOther ID=TopBlock3 onmouseover="SetID(3)" onmouseout="TimerStart()"><img ID=PicTop3 src="pic/3.jpg"/></span>
  <span class=TopSetOther ID=TopBlock4 onmouseover="SetID(4)" onmouseout="TimerStart()"><img ID=PicTop4 src="pic/4.jpg"/></span>
  <span class=TopSetMid   ID=TopBlock5 onmouseover="SetID(5)" onmouseout="TimerStart()"><img ID=PicTop5 src="pic/5.jpg"/></span>
  <span class=TopSetOther ID=TopBlock6 onmouseover="SetID(6)" onmouseout="TimerStart()"><img ID=PicTop6 src="pic/6.jpg"/></span>
  <span class=TopSetOther ID=TopBlock7 onmouseover="SetID(7)" onmouseout="TimerStart()"><img ID=PicTop7 src="pic/7.jpg"/></span>
  <span class=TopSetOther ID=TopBlock8 onmouseover="SetID(8)" onmouseout="TimerStart()"><img ID=PicTop8 src="pic/8.jpg"/></span>
  <span class=TopSetOther ID=TopBlock9 onmouseover="SetID(9)" onmouseout="TimerStart()"><img ID=PicTop9 src="pic/9.jpg"/></span>
 </div>

 <div ID=dawn0401>
  <span class=BottomSetOther ID=BottomBlock1><img ID=PicBottom1 src="pic/1.jpg"/></span>
  <span class=BottomSetOther ID=BottomBlock2><img ID=PicBottom2 src="pic/2.jpg"/></span>
  <span class=BottomSetOther ID=BottomBlock3><img ID=PicBottom3 src="pic/3.jpg"/></span>
  <span class=BottomSetOther ID=BottomBlock4><img ID=PicBottom4 src="pic/4.jpg"/></span>
  <span class=BottomSetMid   ID=BottomBlock5><img ID=PicBottom5 src="pic/5.jpg"/></span>
  <span class=BottomSetOther ID=BottomBlock6><img ID=PicBottom6 src="pic/6.jpg"/></span>
  <span class=BottomSetOther ID=BottomBlock7><img ID=PicBottom7 src="pic/7.jpg"/></span>
  <span class=BottomSetOther ID=BottomBlock8><img ID=PicBottom8 src="pic/8.jpg"/></span>
  <span class=BottomSetOther ID=BottomBlock9><img ID=PicBottom9 src="pic/9.jpg"/></span>
 </div>

</div>
</body>
<script language=javascript type=text/javascript>

 //blog.csdn.net/dawn0718
 var ICurrentSpanID;
 var IMainSpanID;

 function Init(){
  ICurrentSpanID=6;  
  IMainSpanID=5;
 }

 function SetID(ISPanID){
  StopSwith();
  ICurrentSpanID=ISPanID;
  SwitchID();
 }
 
 function SwitchID(){
  if (ICurrentSpanID!=IMainSpanID) {
   document.all["TopBlock"+ICurrentSpanID].style.width  = 400;
   document.all["TopBlock"+ICurrentSpanID].style.height = 300;
   document.all["TopBlock"+ICurrentSpanID].style.pixelTop = 0;

   document.all["BottomBlock"+ICurrentSpanID].style.width  = 400;
   document.all["BottomBlock"+ICurrentSpanID].style.height = 300;
   document.all["BottomBlock"+ICurrentSpanID].style.pixelTop = 0;

   if (ICurrentSpanID<5){
   }
   else
   {
    document.all["TopBlock"+ICurrentSpanID].style.pixelLeft = document.all["TopBlock"+ICurrentSpanID].style.offsetLeft - 400;
    document.all["BottomBlock"+ICurrentSpanID].style.pixelLeft = document.all["BottomBlock"+ICurrentSpanID].style.offsetLeft - 400;
   }

   document.all["TopBlock"+IMainSpanID].style.width  = 60;
   document.all["TopBlock"+IMainSpanID].style.height = 40;
   document.all["TopBlock"+IMainSpanID].style.pixelTop = 260;

   document.all["BottomBlock"+IMainSpanID].style.width  = 60;
   document.all["BottomBlock"+IMainSpanID].style.height = 40;
   document.all["BottomBlock"+IMainSpanID].style.pixelTop = 260;

   for (var i=1;i<10;i++){
    document.all["BottomBlock"+i].style.pixelTop = 0;     
   }
 
   IMainSpanID=ICurrentSpanID;
   
   ICurrentSpanID=ICurrentSpanID+1;
   if (ICurrentSpanID>9){ICurrentSpanID=1;}
   
  }
 }

 function TimerStart(){  TimerID=window.setInterval(SwitchID,2000);}

 function StopSwith(){
    window.clearInterval(TimerID);
 }

 window.onload=function(){
    Init();
    TimerStart();
 }

</script>
</html>

演示图：