当前位置:u赢电竞手机版 > u赢电竞竞猜app > JQuery实战图片特效-遁地龙卷风u赢电竞竞猜app:

JQuery实战图片特效-遁地龙卷风u赢电竞竞猜app:

文章作者:u赢电竞竞猜app 上传时间:2019-05-14

(-1)写在前面

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

用到的图片资源在我的百度云盘里

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

           <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>                 

(0)知识预备

b.overflow

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

(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;

}

 

a.z-index

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

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

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

c.position

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

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

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

本文由u赢电竞手机版发布于u赢电竞竞猜app,转载请注明出处:JQuery实战图片特效-遁地龙卷风u赢电竞竞猜app:

关键词: