您的位置：首页 > Web前端 > JQuery

jquery 图片飞出页面效果插件

2012-04-27 21:45 190 查看

花了点时间写了个图片飞出页面效果的插件，在父容器中可以有多张图片，插件会将它们以一定的错位层叠地放置，点击最顶部的图片，图片可以按照设定的方式飞出页面，后面的图片会移动到容器顶部，可以继续点击。

基于jquery开发，所以要引用jquery库

插件imgPlugin.js 代码如下：

(function ($) {

$.fn.imgPlugin = function (options) {
var ps = $.extend({
contianer: $(document.body),
conWidth: 200,  //容器宽度
conHeight: 200,    //容器高度
sonMarginLeft: 10,  //子元素左外边距
sonMarginTop: 10,   //子元素上外边距
sonWidth: 100,   //子元素宽度
sonHeight: 100,  //子元素高度
sonCount: 16,  //显示的元素数目
flyTime: 300,    //元素飞出页面的时间
sonMoveTime: 500, //元素位移的时间
flyDirection: "default" //设置元素飞出的方向 值：default（元素从左上角飞出页面）、left(元素向左飞出页面)、top(向上飞出页面)
}, options);

var father = (typeof ps.contianer == "string" ? $(ps.contianer) : $(this));
father.css({ "width": ps.conWidth, "height": ps.conHeight, "position": "relative", "padding": "0", "over-flow": "hidden" });

var imgCount = ps.sonCount;
var imgWidth = ps.sonWidth;
var imgHeight = ps.sonHeight;
var imgMarginTop = ps.sonMarginTop;
var imgMarginLeft = ps.sonMarginLeft;
var sons = father.find("img");
var direction = ps.flyDirection;

if (sons.length < imgCount) {
alert("设置显示的图片数大于实际存在的图片数");
return;
}

function fly(img) {
var sonTop = $(img).offset().top + $(img).outerHeight();
var sonLeft = $(img).offset().left + $(img).outerWidth();
var browserWidth = window.document.body.clientWidth;
var browserHeight = window.document.body.clientHeight;
var delayTime = "";
switch (direction) {
case "default":
$(img).animate({ top: '-=' + sonTop, left: '-=' + sonLeft }, ps.flyTime);
delayTime = imgHeight / sonTop * ps.flyTime;
break;
case "top":
$(img).animate({ top: '-=' + sonTop }, ps.flyTime);
delayTime = imgHeight / sonTop * ps.flyTime;
break;
case "left":
$(img).animate({ left: '-=' + sonLeft }, ps.flyTime);
delayTime = imgWidth / sonLeft * ps.flyTime;
break;
default:
delayTime = 1000;
}
return delayTime;
}

function imgFly(img) {
$(img).bind('click', function () {
var lastSon = father.find("img:last");
var nextSilbings = $(img).nextAll();
//获取图片在容器中的样式改变的延时
var delayMoveTine = fly(img);

//复制当前元素并设置属性添加到父元素最后
$(img).clone().css({ "z-index": "0", "display": "none", "margin-top": imgMarginTop * (imgCount - 1), "margin-left": imgMarginLeft * (imgCount - 1) }).insertAfter(lastSon);

//递归 给下个元素绑定事件
$(img).next().bind('click', imgFly($(img).next()));

setTimeout(
function () {
for (var i = 0; i < imgCount; i++) {
if (i < imgCount - 1) {
$(nextSilbings[i]).css("z-index", (imgCount - i - 1));
$(nextSilbings[i]).animate({ "margin-top": "-=" + ps.sonMarginTop, "margin-left": "-=" + ps.sonMarginLeft }, ps.sonMoveTime);
}
else {
$(nextSilbings[i]).css({ "z-index": "0", "display": "block", "position": "absolute", "margin-top": imgMarginTop * (imgCount - 1), "margin-left": imgMarginLeft * (imgCount - 1) });
}
}
}
, delayMoveTine
);

});
}

sons.each(
function (e) {
$(this).css({ "position": "absolute", "width": imgWidth, "height": imgHeight });
if (e == 0) {
imgFly(this);
}
if (e < imgCount) {
$(this).css({ "z-index": imgCount - e, "margin-top": imgMarginTop * e, "margin-left": imgMarginLeft * e, "display": "block" });
}
else {
$(this).css({ "display": "none", "margin-top": imgMarginTop * e, "margin-left": imgMarginLeft * e });
}

}
)

}

})(jQuery)

页面使用代码：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script language="javascript" src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script language="javascript" src="js/imgPlugin.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
$(document).ready(

function () {
$("#father").imgPlugin({
sonCount: 4
})
}
)
</script>
</head>
<body>
<div id="father" style="width:200px; height:200px; margin-top:300px;border:1px solid #000; margin-left:400px;">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
<img src="img/8.jpg" />
<img src="img/9.jpg" />
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航