你的位置:首页 > Java教程

[Java教程]JQuery实战图片特效


(-1)写在前面

这个idea是我拷贝别人的,但代码是我自已一点点敲出来的,首先向这位前辈致敬,我用的是chrome49、firefox43、IE9,jquery3.0。言辞请结合代码,避免断章取意。

用到的图片资源在我的百度云盘里
http://yun.baidu.com/share/link?shareid=710445916&uk=1302053889

(0)知识预备

a.z-index

用来设置元素的层,值越大层次越高,当元素发生重叠时,值较大的显示在前面,值较小的显示在后面,值相同时,在DOM树中靠后位置的元素显示在前面。

z-index样式不会改变元素在DOM树中的位置

注意这个css样式存在浏览器兼容问题,当值为负数的时候,不触发绑定在元素上的事情,也不传播事件。只是因为在firefox43多点了几下…

b.overflow

用来处理子元素超出父元素边界的情况,值为hidden时,隐藏超出的部分。

c.position

用来设置元素定位方式,默认值为static,当该值最终不是static时,top、left的值才有效,同时成为子元素的定位点。

当值为fixed的时,相对于浏览器视口的左顶点定位,不随滚动条位置的变化而变化位置。

body、html元素的position的值都是static,不能成为子元素的定位点。所以body子元素的定位在body元素position使用默认值的情况下,是相对于浏览器显示文档的左顶点,因为通常不会对body设置什么边框、外边距,所以看不出什么区别。

d.向JQuery中添加函数

(1)$.函数名,列如$.random,向全局添加

(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中设置-->

           <divid="area1">

                 <imgsrc="area1/1.jpg" />

                 <imgsrc="area1/2.jpg" />

                 <imgsrc="area1/3.jpg" />

           </div>

           <divid="area2">

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

                 <imgsrc="area2/2.jpg" />

                 <imgsrc="area2/3.jpg" />

           </div>

           <divid="area3">

                 <imgsrc="area3/1.jpg" />

                 <imgsrc="area3/2.jpg" />

                 <imgsrc="area3/3.jpg" />

           </div>

           <divid="area4">

                 <imgsrc="area4/1.jpg" />

                 <imgsrc="area4/2.jpg" />

                 <imgsrc="area4/3.jpg" />

           </div>

           <divid="area5">

                 <imgsrc="area5/1.jpg" />

                 <imgsrc="area5/2.jpg" />

                 <imgsrc="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;

}