JQuery实战图片特效-遁地龙卷风

时间:2024-01-01 20:08:51

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

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

}