标签：style blog http java os io for ar 2014
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,p,h1,h2,h3,h4,h5,h6,dl,dd,li{margin:0}
ol,ul{list-style:none;padding:0;margin:0}
a{text-decoration:none;}
img{border:none;}
.img-panel li{
position:absolute;
/*display: inline-block;*/
width:90px;
height:120px;
border: 3px #d9d9d9 solid;
z-index: 10;
}
.img-panel img{
display: inline;
width: 100%;
height:100%;
}
</style>
</head>
<body>
<div class="content">
</div>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$.ImagePanel = function(options){
var _options={
depend:".content",
img_min_height:120,
img_max_height:200,
img_min_width:90,
img_max_width:150,
cols:3,
img_list:["onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg","onepiece.jpg"]
};
_options = $.extend(_options,options);
var i, panel,ul,li,img;
panel = document.createElement("div");
ul = document.createElement("ul");
panel.className="img-panel";
for(i=0;i<_options.img_list.length;i++){
if(i%_options.cols==0&&i!=0){
panel.appendChild(ul);
ul = document.createElement("ul");
}
li = document.createElement("li");
li.style.left =(_options.img_min_width+10) * parseInt(i%_options.cols)+"px";
li.style.top = (_options.img_min_height+10) * parseInt(i/_options.cols)+"px";
img = document.createElement("img");
img.src =_options.img_list[i];
li.appendChild(img);
ul.appendChild(li);
}
$(_options.depend).append(panel);
$(".img-panel li").mouseover(function(e){
$(e.currentTarget).css("z-index","1000");
$(e.currentTarget).animate({margin:"-"+(_options.img_max_width-_options.img_min_width)/2+"px 0 0 -"+(_options.img_max_height-_options.img_min_height)/2+"px",
width:_options.img_max_width + "px",height: _options.img_max_height + "px"},500,function(){
$(e.currentTarget).css("z-index","1000");
});
});
$(".img-panel li").mouseleave(function(e){
$(e.currentTarget).animate({margin:"0",width:_options.img_min_width+"px",height:_options.img_min_height+"px"},200,function(){
$(e.currentTarget).css("z-index","10");
});
});
};
$.ImagePanel({});
</script>
</body>
</html>
效果
标签：style blog http java os io for ar 2014
原文地址：http://www.cnblogs.com/benson-liu/p/3934916.html
