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>

<head>

{

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>

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

</div>

</div>

</div>

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

}