JQuery實戰圖片特效-遁地龍捲風

時間  2019-11-11
標籤 jquery 實戰 圖片 特效 龍捲風 欄目 JQuery 简体版
原文   原文鏈接

(-1)寫在前面

這個idea是我拷貝別人的，但代碼是我自已一點點敲出來的，首先向這位前輩致敬，我用的是chrome4九、firefox4三、IE9，jquery3.0。言辭請結合代碼，避免斷章取意。javascript

用到的圖片資源在個人百度雲盤裏
http://yun.baidu.com/share/link?shareid=710445916&uk=1302053889css

(0)知識預備

a.z-index

用來設置元素的層，值越大層次越高，當元素髮生重疊時，值較大的顯示在前面，值較小的顯示在後面，值相同時，在DOM樹中靠後位置的元素顯示在前面。html

z-index樣式不會改變元素在DOM樹中的位置java

注意這個css樣式存在瀏覽器兼容問題，當值爲負數的時候，不觸發綁定在元素上的事情，也不傳播事件。只是由於在firefox43多點了幾下…jquery

b.overflow

用來處理子元素超出父元素邊界的狀況，值爲hidden時，隱藏超出的部分。chrome

c.position

用來設置元素定位方式，默認值爲static,當該值最終不是static時，top、left的值纔有效，同時成爲子元素的定位點。數組

當值爲fixed的時，相對於瀏覽器視口的左頂點定位，不隨滾動條位置的變化而變化位置。瀏覽器

body、html元素的position的值都是static，不能成爲子元素的定位點。因此body子元素的定位在body元素position使用默認值的狀況下，是相對於瀏覽器顯示文檔的左頂點，由於一般不會對body設置什麼邊框、外邊距，因此看不出什麼區別。dom

d.向JQuery中添加函數

（1）$.函數名，列如$.random，向全局添加ide

（2）$.fn.函數名，列如$.fn.centerPos，向JQuery對象中添加

(1)html文件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset=utf-8>

<script   type="text/javascript" src="debug-jquery-3.0.0.js"></script>

<script   type="text/javascript" src="base.js"  ></script>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<title>爲了生活</title>

<style type="text/css">

      *

      {

           margin:0;

           padding:0;

      }

      body

      {

           background:url("bg.gif");

           position:absolute;

      }

      #container

      {

           width:902px;

           height:470px;

           margin:0 auto;

           position:fixed;

           border:2px #fff solid;

           box-shadow:1px 1px 3px #222;

          

      }

      #area1

      {

           width:449px;

           height:334px;

      }

      #area2

      {

           width:451px;

           height:165px;

           margin-left:1px;

           margin-top:1px;

      }

      #area3

      {

           width:451px;

           height:167px;

           margin-left:1px;

           margin-top:1px;

      }

      #area4

      {

           width:192px;

           height:135px;

           clear:left;

           margin-top:1px;

      }

      #area5

      {

           width:708px;

           height:135px;

           margin-top:1px;

      }

      #container div

      {

           float:left;

           position:relative;

           overflow:hidden;

      }

      #container div img

      {

           position:absolute;

           //是z-index生效的前提之一

      }

</style>

</head

<body>

      <button accesskey="z" onclick="document.location.reload()">刷新</button>

      <!—Alt+z可刷新頁面-->

      <div id="container">
           <!—圖片的z-index樣式在base.js中設置-->

           <div id="area1">

                 <img src="area1/1.jpg" />

                 <img src="area1/2.jpg" />

                 <img src="area1/3.jpg" />

           </div>

           <div id="area2">

                 <img src="area2/1.jpg" />

                 <img src="area2/2.jpg" />

                 <img src="area2/3.jpg" />

           </div>

           <div id="area3">

                 <img src="area3/1.jpg" />

                 <img src="area3/2.jpg" />

                 <img src="area3/3.jpg" />

           </div>

           <div id="area4">

                 <img src="area4/1.jpg" />

                 <img src="area4/2.jpg" />

                 <img src="area4/3.jpg" />

           </div>

           <div id="area5">

                 <img src="area5/1.jpg" />

                 <img src="area5/2.jpg" />

                 <img src="area5/3.jpg" />

           </div>

      </div>

</body>              

</html>                 

（2）js文件

$(function()

{

   //$開頭的是JQuery對象

   var  $container = $("#container"),

         $areas = $container.find("div"),

         maxZindex = 9999;

   $areas.bind("mouseenter",function()

   {

         var index = $(this).data("index"),//div中層次最高的圖片索引

               $imgs = $(this).find("img"),

              length = $imgs.length,

              $img = $imgs.eq(index),

              random = $.random(0,7),

              // random是自定義的方法

              css,

              nextImg;

              if(index == length-1)

              {

                    nextImg = $imgs.eq(0)[0];

              }

              else

              {

                    nextImg = $imgs.eq(index+1)[0];

              }

              nextImg.style.zIndex = maxZindex-1;

              //switch不支持隱式轉換，0和」0」是不匹配的

              switch(random)

              {

                    case 0:css = {top:"-"+$img.height()}; break;

                    case 1:css = {left:"-"+$img.width()};break;

                    case 2:css = {top:$img.height()};break;

                    case 3:css = {left:$img.width()};break;

                    case 4:css = {top:"-"+$img.height(),opacity:0};break;

                    case 5:css = {left:"-"+$img.width(),opacity:0};break;

                    case 6:css = {top:$img.height(),opacity:0};break;

                    case 7:css = {left:$img.width(),opacity:0};break;

              }

         $img.animate(css,"swing",function()

         {

              this.style.top = "0px";

              this.style.left = "0px";

              this.style.zIndex = 1;

              nextImg.style.zIndex = maxZindex;

              if(random>3)

              {

                    $(this).css("opacity",1);

              }

 

         });

         if(index == $imgs.length-1) index=-1;

         $(this).data("index",++index);

        

   }).each(function()

   {

         $(this).data("index",0);//層次最高的圖片在DOM樹中的索引

         var $imgs = $(this).find("img");

         $imgs.each(function(index)

         {

              this.style.zIndex = maxZindex-index;

         })

   }).bind("click",function()

   {

         $areas.trigger("mouseenter");          

   })

   $container.centerPos();//元素相對於瀏覽器視口水平垂直居中

   window.onresize = function()

   {

         //隨着瀏覽器視口大小的變化動態的改變元素的位置

         $container.centerPos();

   }

})

//產生大於等於min、小於等於max的值，值不在filter一維數組中

$.random = function(min,max,filter)

{

  

   var i,

   n = Math.floor(Math.random()*(max-min+1)+min);

   if(filter != undefined && filter.constructor == Array)

   {

         if(filter.constructor == Array)

         {

               for(i=filter.length-1;i>-1;i--)

               {

                     if(n == filter[i])

                     {

                          n = Math.floor(Math.random()*(max-min+1)+min)

                          i = filter.length;

                    }

               }

           }

           else

           {

                 window.console.warn("random第三個參數應爲一維數組");

}

   }

   return n;

}

//top、lef的值根據父元素的寬和高計算,也就是父元素是子元素的定位點

$.fn.centerPos = function()

{

   var parent;

   this.each(function(index)

   {

         parent = this.parentNode;

         if(parent == document.body)

         {

              parent = window;

         }

         var position = $(this).css("position");

         if(position == "fixed" || position=="absolute")

         {

              $(this).css("left",($(parent).width()-this.offsetWidth)/2+"px")

                       .css("top",($(parent).height()-this.offsetHeight)/2+"px");

         }

         else

         {

              window.console.error("沒有設置有效的position值");

         }

   })

   return this;

}

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程