cari

Rumah  >  Artikel  >  hujung hadapan web  >  perkongsian kod pembesaran menatal imej jquery (1)_jquery

perkongsian kod pembesaran menatal imej jquery (1)_jquery

WBOY
WBOYasal
2016-05-16 15:42:561063semak imbas

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>

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

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：Kod kesan menu drop-down FixedMenu dilaksanakan oleh jQuery_jqueryArtikel seterusnya：Kod kesan menu drop-down FixedMenu dilaksanakan oleh jQuery_jquery

Artikel berkaitan

Lihat lagi