perkongsian kod pembesaran menatal imej jquery (1)

perkongsian kod pembesaran menatal imej jquery (1)_jquery

WBOY

Lepaskan： 2016-05-16 15:42:56

asal

1027 orang telah melayarinya

Contoh dalam artikel ini menerangkan kesan penatalan dan pembesaran imej jquery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini adalah kod berdasarkan jquery yang melaksanakan penatalan imej dan kesan pembesaran Ia mempunyai anak panah kiri dan kanan Ia sesuai untuk paparan produk dan memudahkan pengguna melayari butiran produk.
Rendering operasi: ----------------------Lihat kesanMuat turun kod sumber-------- ------ ----------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.
Kod kesan menatal dan zum imej jquery yang dikongsi dengan anda adalah seperti berikut

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片滚动放大效果</title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>

<body>
<div class="sliderbox">
 <div id="btn-left" class="arrow-btn dasabled"></div>
 <div class="slider">
 <ul>
 <li><a href="http://www.jb51.net/" target="_blank"><img src="images/go-launcher-ex.jpg"/></a></li>
 <li><a href="http://www.jb51.net/" target="_blank"><img src="images/go-sms.jpg"/></a></li>
 <li><a href="http://www.jb51.net/" target="_blank"><img src="images/imgwww20120104173328332830083.png"/></a></li>
 <li><a href="http://www.jb51.net/" target="_blank"><img src="images/imgwww20120222114514451461239.jpg"/></a></li>
 <li><a href="http://www.jb51.net/" target="_blank"><img src="images/ggbook.jpg"/></a></li>
 <li><a href="http://www.jb51.net/" target="_blank"><img src="images/imgwww20120621153035303523388.png"/></a></li>
 <li><a href="http://www.jb51.net/" target="_blank"><img src="images/lianxiren.jpg"/></a></li>
 <li><a href="http://www.jb51.net/" target="_blank"><img src="images/go-touch.jpg"/></a></li>
 <li><a href="http://www.jb51.net/" target="_blank"><img src="images/3g-android-market.jpg"/></a></li>
 <li><a href="http://www.jb51.net/" target="_blank"><img src="images/3ggoucai.jpg"/></a></li>
 </ul>
 </div>
 <div id="btn-right" class="arrow-btn"></div>
</div>

<script type="text/javascript">

var $slider = $('.slider ul');
var $slider_child_l = $('.slider ul li').length;
var $slider_width = $('.slider ul li').width();
$slider.width($slider_child_l * $slider_width);

var slider_count = 0;

if ($slider_child_l < 6) {
 $('#btn-right').css({cursor: 'auto'});
 $('#btn-right').removeClass("dasabled");
}

$('#btn-right').click(function() {
 if ($slider_child_l < 6 || slider_count >= $slider_child_l - 6) {
 return false;
 }
 
 slider_count++;
 $slider.animate({left: '-=' + $slider_width + 'px'}, 'slow');
 slider_pic();
});

$('#btn-left').click(function() {
 if (slider_count <= 0) {
 return false;
 }
 
 slider_count--;
 $slider.animate({left: '+=' + $slider_width + 'px'}, 'slow');
 slider_pic();
});

function slider_pic() {
 if (slider_count >= $slider_child_l - 6) {
 $('#btn-right').css({cursor: 'auto'});
 $('#btn-right').addClass("dasabled");
 }
 else if (slider_count > 0 && slider_count <= $slider_child_l - 6) {
 $('#btn-left').css({cursor: 'pointer'});
 $('#btn-left').removeClass("dasabled");
 $('#btn-right').css({cursor: 'pointer'});
 $('#btn-right').removeClass("dasabled");
 }
 else if (slider_count <= 0) {
 $('#btn-left').css({cursor: 'auto'});
 $('#btn-left').addClass("dasabled");
 }
}

$('.slider a').hover(function() {
 if ($(this).find('img:animated').length) return;
 $(this).animate({marginTop: '0px'}, 300);
 $(this).find('img').animate({width: '150px'}, 300);
}, function() {
 
 $(this).animate({marginTop: '24px'}, 200);
 $(this).find('img').animate({width: '90px'}, 200);
});

</script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

Salin selepas log masuk

Di atas ialah kod kesan pembesaran menatal imej jquery yang dikongsi dengan anda, saya harap anda boleh menyukainya.