recherche

Maison  >  Article  >  interface Web  >  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

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
WBOYoriginal
2016-05-16 16:38:461352parcourir

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>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JQuery implémente une table de bouton de clic de table dynamique pour ajouter un row_jqueryArticle suivant：JQuery implémente une table de bouton de clic de table dynamique pour ajouter un row_jquery

Articles Liés

Voir plus