cari

Rumah >hujung hadapan web >tutorial js >Gambar yang menyokong kesan gelongsor ke atas, bawah, kiri dan kanan bagi sebarang saiz_jquery

Gambar yang menyokong kesan gelongsor ke atas, bawah, kiri dan kanan bagi sebarang saiz_jquery

WBOY
WBOYasal
2016-05-16 16:38:461371semak imbas

Kami sering menghadapi masalah bahawa imej berubah bentuk selepas dimuat naik melalui latar belakang Jika gaya tapak web anda sesuai, anda boleh menggunakan kaedah ini untuk susun atur halaman dan menyokong gelongsor imej dalam sebarang saiz (gelongsor ke atas, ke bawah,. kiri, dan kanan) 

<! 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>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JQuery melaksanakan jadual butang klik jadual dinamik untuk menambah row_jqueryArtikel seterusnya：JQuery melaksanakan jadual butang klik jadual dinamik untuk menambah row_jquery

Artikel berkaitan

Lihat lagi