Heim > Artikel > Web-Frontend > jquery Bild-Scrolling-Vergrößerungscode-Sharing (1)_jquery

jquery Bild-Scrolling-Vergrößerungscode-Sharing (1)_jquery

WBOYOriginal: 2016-05-16 15:42:561028Durchsuche

Das Beispiel in diesem Artikel beschreibt den Scroll- und Vergrößerungseffekt von JQuery-Bildern. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein auf JQuery basierender Code, der Bildlauf- und Vergrößerungseffekte implementiert. Er eignet sich für die Produktanzeige und erleichtert Benutzern das Durchsuchen von Produktdetails.
Vorgangsrendering: ---------------------------------------------------------------------------------------------------------------------------------- ------ ----------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.

Der mit Ihnen geteilte jquery-Bild-Scroll- und Zoom-Effektcode lautet wie folgt

<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>

Das Obige ist der mit Ihnen geteilte JQuery-Bildlauf-Vergrößerungseffektcode. Ich hoffe, er gefällt Ihnen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Von jQuery_jquery implementierter FixedMenu-Dropdown-MenüeffektcodeNächster Artikel：Von jQuery_jquery implementierter FixedMenu-Dropdown-Menüeffektcode

In Verbindung stehende Artikel

Mehr sehen