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 >
<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 >
<!—图片的z-index样式在base.js中设置-->
<div >
<img src="area1/1.jpg" />
<img src="area1/2.jpg" />
<img src="area1/3.jpg" />
</div>
<div >
<img src="area2/1.jpg" />
<img src="area2/2.jpg" />
<img src="area2/3.jpg" />
</div>
<div >
<img src="area3/1.jpg" />
<img src="area3/2.jpg" />
<img src="area3/3.jpg" />
</div>
<div >
<img src="area4/1.jpg" />
<img src="area4/2.jpg" />
<img src="area4/3.jpg" />
</div>
<div >
<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;
}
- 上一篇 »css特效-一道闪光在图片上划过
- 下一篇 »JavaScript特效源码，4、鼠标特效