Une image qui prend en charge les effets de glissement vers le haut, le bas, la gauche et la droite de n'importe quelle taille

Une image qui prend en charge les effets de glissement vers le haut, le bas, la gauche et la droite de n'importe quelle taille_jquery

WBOY

Libérer： 2016-05-16 16:38:46

original

1361 Les gens l'ont consulté

Nous rencontrons souvent le problème que les images sont déformées après avoir été téléchargées en arrière-plan. Si le style de votre site Web est adapté, vous pouvez utiliser cette méthode pour mettre en page la page et prendre en charge le glissement d'images de n'importe quelle taille (glissade vers le haut, vers le bas, gauche et droite)

<! DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>任意尺寸的图片滑动</title>
<style>
div { margin: 0 auto; 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>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(e) {
$(".divimg .img").load(function(){
var w=parseInt($(this).width());
var h=parseInt($(this).height());
var hh=$(this).parent().height();
var ww=$(this).parent().width();
var blw=w/parseInt(ww);
var blh=h/parseInt(hh);
function left(){
$(this).animate({left:-(parseInt(parseInt(hh)/h*w)-(parseInt(ww)))},10000,right)
}
function right(){
$(this).animate({left:0},10000,left);
}
function top(){
$(this).animate({top:-(parseInt(parseInt(ww)/w*h)-(parseInt(hh)))},10000,bottom);
}
function bottom(){
$(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);
}
else if(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>
<div class="main">
<div class="divimg">
<div class="divimg_div1">
<div class="divimg_title">任意尺寸的图片滑动</div>
<div class="divimg_img1"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_bigimg01.jpg" src="" /> </div>
</div>
<div class="divimg_div2">
<div class="divimg_img2"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_nyimg01.jpg" src="" /> </div>
<div class="divimg_img3"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_img02.jpg" src="" /> </div>
<div class="divimg_img4"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_newimg01.jpg" src="" /> </div>
<div class="divimg_img5"> <img class="gif" src="images/loadding.gif" width="100" height="100" /> <img class="img" name="images/am_rynewimg03.jpg" src="" /> </div>
</div>
</div>
</div>
</body>
</html>

Copier après la connexion