一个支持任意尺寸的图片上下左右滑动效果
常常遇到图片通过后台上传后就变形了的问题，如果你的网站风格适合，可以用这种方式来给页面布局，支持任意尺寸的图片滑动（上下左右滑动）
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>任意尺寸的图片滑动</title>
<style>
div{margin:0auto;overflow:hidden;}
.main{width:1000px;}
.divimg_div1{width:380px;float:left;}
.divimg.div4_title{width:380px;height:103px;background-color:#EDB205;color:#FFF;font-family:"微软雅黑";font-size:22px;font-weight:bold;line-height:90px;text-align:center;letter-spacing:5px;}
.divimg_img1{width:380px;height:414px;margin-top:5px;background-color:#FFF;position:relative;}
.divimg_div2{width:615px;float:right;}
.divimg_img2{width:194px;height:256px;float:left;background-color:#FFF;position:relative;}
.divimg_img3{width:417px;height:256px;float:right;background-color:#FFF;position:relative;}
.divimg_img4{width:366px;height:262px;float:left;margin-top:4px;background-color:#FFF;position:relative;}
.divimg_img5{width:245px;height:262px;float:right;margin-top:4px;background-color:#FFF;position:relative;}
.divimg.gif{position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px;z-index:2;}
.divimg.img{position:absolute;z-index:1;left:0;top:0;display:none;}
</style>
<scriptsrc="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(e){
$(".divimg.img").load(function(){
varw=parseInt($(this).width());
varh=parseInt($(this).height());
varhh=$(this).parent().height();
varww=$(this).parent().width();
varblw=w/parseInt(ww);
varblh=h/parseInt(hh);
functionleft(){
$(this).animate({left:-(parseInt(parseInt(hh)/h*w)-(parseInt(ww)))},10000,right)
}
functionright(){
$(this).animate({left:0},10000,left);
}
functiontop(){
$(this).animate({top:-(parseInt(parseInt(ww)/w*h)-(parseInt(hh)))},10000,bottom);
}
functionbottom(){
$(this).animate({top:0},10000,top);
}
if(blw>blh)
{
$(this).height(hh).width(parseInt(parseInt(hh)/h*w));
$(this).prev().hide();
$(this).css({"z-index":"3","display":"block"});
$(this).animate({left:-(parseInt(parseInt(hh)/h*w)-(parseInt(ww)))},10000,right);
}
elseif(blw<blh)
{
$(this).height(parseInt(parseInt(ww)/w*h)).width(ww);
$(this).prev().hide();
$(this).css({"z-index":"3","display":"block"});
$(this).animate({top:-(parseInt(parseInt(ww)/w*h)-(parseInt(hh)))},10000,bottom);
}
});
$(".div4.img").each(function(index,element){
$(this).attr("src",$(this).attr("name"));
});
});
</script>
</head>
<body>
<divclass="main">
<divclass="divimg">
<divclass="divimg_div1">
<divclass="divimg_title">任意尺寸的图片滑动</div>
<divclass="divimg_img1"><imgclass="gif"src="images/loadding.gif"width="100"height="100"/><imgclass="img"name="images/am_bigimg01.jpg"src=""/></div>
</div>
<divclass="divimg_div2">
<divclass="divimg_img2"><imgclass="gif"src="images/loadding.gif"width="100"height="100"/><imgclass="img"name="images/am_nyimg01.jpg"src=""/></div>
<divclass="divimg_img3"><imgclass="gif"src="images/loadding.gif"width="100"height="100"/><imgclass="img"name="images/am_img02.jpg"src=""/></div>
<divclass="divimg_img4"><imgclass="gif"src="images/loadding.gif"width="100"height="100"/><imgclass="img"name="images/am_newimg01.jpg"src=""/></div>
<divclass="divimg_img5"><imgclass="gif"src="images/loadding.gif"width="100"height="100"/><imgclass="img"name="images/am_rynewimg03.jpg"src=""/></div>
</div>
</div>
</div>
</body>
</html>