首頁 > 開發者 > 網站開發

模仿網易新聞的首頁特效

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　網易新聞的首頁特效很好看，上個星期做網頁專題寫了個特效結果不理想，今天上午就想模仿網易新聞的效果，下午開始動手到晚上終於搞定了。
　　實現效果：
    1、正常情況下，圖片和文字內容輪動；可以修改ContentN.Html(N=1~6)檔案裡面的內容；
    2、滑鼠移入大圖，輪動停止，可以點擊向左或者向右進行瀏覽，也可以點擊具體的小圖片進行瀏覽；
    3、小圖片和左右按鈕式半透明，可以隨意設定焦點的圖片樣式；
    4、可以隨意將效果移置到其他網頁中。
　　下面是代碼：<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;
   red;
   width:1024;
   height:500;
   border:0;
   overflow:hidden;
   z-index:1;}
        #dawn0718      {position:absolute;
   left:464;
                        top:0;
   text-align:center;
   topmargin:0;
   leftmargin:0;
   width:560px;
   height:280px;
   border:0;
   blue;
   overflow:hidden;
   z-index:2}        #Content0      {position:absolute;
                        left:0;
   z-index:3
                        }
        #Content1      {position:absolute;
                        left:560;
   z-index:4
                        }
        #Content2      {position:absolute;
                        left:1120;
   z-index:5
                        }
        #Content3      {position:absolute;
                        left:1680;
   z-index:6
                        }
        #Content4      {position:absolute;
                        left:2240;
   z-index:7
                        }
        #Content5      {position:absolute;
                        left:2800;
   z-index:8
                       } #MidBtn        {position:absolute;
                 width:400;
                 height:50;
   top:108;
   left:0;
   z-index:718;
   filter:alpha(opacity=70);
                 }
 #LeftBtn        {position:absolute;
   top:0;
   left:18;
   z-index:719;
   filter:alpha(opacity=60);
                 } #RightBtn       {position:absolute;
   top:0;
   left:342;
   z-index:780;
                 } #BottomPicBtn  {position:absolute;
                 width:400;
                 height:50;
   top:228;
   left:0;
   z-index:9999;
   filter:alpha(opacity=70);
                 }
 #SmallPic0      {position:absolute;
                         width:59;
    height:42;
    top:2;
    Left:12;
    border-width:0;
   margin:2px 2px auto;
    }
 #SmallPic1      {position:absolute;
    width:59;
    height:42;
                         top:2;
    Left:76;
    border-width:0;
   margin:2px 2px auto;
   }
 #SmallPic2      {position:absolute;
                         width:59;
    height:42;
   top:2;
   Left:140;
   border-width:0;
   margin:2px 2px auto;
   }
 #SmallPic3      {position:absolute;
                         width:59;
    height:42;
   top:2;
   Left:204;
   border-width:0;
   margin:2px 2px auto;
   }
 #SmallPic4      {position:absolute;
                         width:59;
    height:42;
   top:2;
   Left:268;
   border-width:0;
   margin:2px 2px auto;
   }
 #SmallPic5      {position:absolute;
                         width:59;
    height:42;
   top:2;
   Left:332;
   border-width:0;
   margin:2px 2px auto;
   }
        .PicFocus      {position:absolute;
                        margin:2px 2px 2px 2px;
                        border-width:4;
   border-style:solid;
   border-color:white;
   background:white;
   }
  
</style><script language=javascript type=text/javascript> var ScrollStr;
 var ScrollWidth=560;
 var ScrollNumBers=6;
 var TimerID;
        var ActionFlag=0; function init(){
     ScrollStr="012345";
         ReadyDiv();
  HideBottomPicBtn();
        }        function ReadyDiv(){
         for(var i=0;i<ScrollNumBers;i++){
             var DivTemp=document.getElementById("Content"+ScrollStr.substring(i,i+1)).style;
             DivTemp.xpos=(i - 1)*ScrollWidth;
             DivTemp.left=DivTemp.xpos+'px';
      document.getElementById("SmallPic"+i).className="SmallPic"+i.toString();
         }
         document.getElementById("SmallPic"+ScrollStr.substring(1,2)).className="PicFocus";     
 }        function ScrollPicToLeft(){
         ScrollStr=ScrollStr.substring(1,ScrollNumBers)+ScrollStr.substring(0,1);
  ReadyDiv();
 }        function ScrollPicToRight(){
         ScrollStr=ScrollStr.substring(ScrollNumBers - 1,ScrollNumBers)+ScrollStr.substring(0,ScrollNumBers - 1);
  ReadyDiv();
 }        function ShowBottomPicBtn() {
  StopSwith();
  var PspMidBtn=document.getElementById("MidBtn");
         PspMidBtn.style.visibility="visible";  var PspBottomPicBtn=document.getElementById("BottomPicBtn");
         PspBottomPicBtn.style.visibility="visible";
 }        function HideBottomPicBtn() {
  var PspMidBtn=document.getElementById("MidBtn");
         PspMidBtn.style.visibility="hidden";  var PspBottomPicBtn=document.getElementById("BottomPicBtn");
         PspBottomPicBtn.style.visibility="hidden";
  TimerStart();
 }        function ScrollToPic(StrPicID){
                var IFind=ScrollStr.indexOf(StrPicID);
          ScrollStr=ScrollStr.substring(IFind,ScrollNumBers)+ScrollStr.substring(0,IFind);
  ScrollPicToRight();
  ReadyDiv();
 } function TimerStart(){  if ( ActionFlag==0 ) {
       ActionFlag=1;
       TimerID=window.setInterval(ScrollPicToLeft,3000);}
  }
 function StopSwith(){   ActionFlag=0;
    window.clearInterval(TimerID);
 }
 window.
    init();
    TimerStart();
 }
       
</script>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div id=dawn0919>
 <div id=dawn0718 onMouseOut="HideBottomPicBtn()" onMouseOver="ShowBottomPicBtn()">
  <div ID=One>
   <iframe id="Content0" src="html/Content1.htm" frameborder="0" scrolling="0" border="0" width="560" height="280"></iframe>
  </div>
  <div ID=Two>
   <iframe id="Content1" src="html/Content2.htm" frameborder="0" scrolling="0" border="0" width="560" height="280"></iframe>
  </div>
  <div ID=Three>
   <iframe id="Content2" src="html/Content3.htm" frameborder="0" scrolling="0" border="0" width="560" height="280"></iframe>
  </div>
  <div ID=Four>
   <iframe id="Content3" src="html/Content4.htm" frameborder="0" scrolling="0" border="0" width="560" height="280"></iframe>
  </div>
  <div ID=Five>
   <iframe id="Content4" src="html/Content5.htm" frameborder="0" scrolling="0" border="0" width="560" height="280"></iframe>
  </div>
  <div ID=Six>
   <iframe id="Content5" src="html/Content6.htm" frameborder="0" scrolling="0" border="0" width="560" height="280"></iframe>
  </div>
  <div ID=MidBtn>
   <img src=\'#\'" /LeftBtn.jpg"  id=LeftBtn  onMouseDown="ScrollPicToLeft()" onMouseUp="void(null)" onMouseOut="void(null)" />
   <img src=\'#\'" /RightBtn.jpg" id=RightBtn onMouseDown="ScrollPicToRight()" onMouseUp="void(null)" onMouseOut="void(null)" />
  </div>
  <div ID=BottomPicBtn>
   <div class=PicFocus ID=SmallPic0 ><img src=\'#\'" /1_0.jpg" onMouseDown="ScrollToPic('0')" onMouseOut="void(null)" /></div>
   <div class=PicFocus ID=SmallPic1 ><img src=\'#\'" /2_0.jpg" onMouseDown="ScrollToPic('1')" onMouseOut="void(null)" /></div>
   <div class=PicFocus ID=SmallPic2 ><img src=\'#\'" /3_0.jpg" onMouseDown="ScrollToPic('2')" onMouseOut="void(null)" /></div>
   <div class=PicFocus ID=SmallPic3 ><img src=\'#\'" /4_0.jpg" onMouseDown="ScrollToPic('3')" onMouseOut="void(null)" /></div>
   <div class=PicFocus ID=SmallPic4 ><img src=\'#\'" /5_0.jpg" onMouseDown="ScrollToPic('4')" onMouseOut="void(null)" /></div>
   <div class=PicFocus ID=SmallPic5 ><img src=\'#\'" /6_0.jpg" onMouseDown="ScrollToPic('5')" onMouseOut="void(null)" /></div>
  </div>
 </div>
</div>
</body>
</html>：650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/12031T124-0.jpg" />

本文出自 “CSharp” 部落格，請務必保留此出處http://dawn0919.blog.51cto.com/2954252/1128059

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
H5 中html 頁面存為圖片並長按 儲存
__x__(20)0907第四天__ css 框模型

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More