이 기사의 예에서는 jquery 이미지의 스크롤 및 확대 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
이미지 스크롤 및 확대 효과를 구현하는 jquery 기반의 코드입니다. 왼쪽 및 오른쪽 화살표가 있어 사용자가 제품 세부정보를 쉽게 탐색할 수 있습니다.
작업 렌더링: ---------효과 보기소스 코드 다운로드--------- ------ ----------
팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
귀하에게 공유된 jquery 이미지 스크롤 및 확대/축소 효과 코드는 다음과 같습니다
<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>
위는 공유해드린 jquery 이미지 스크롤 확대 효과 코드입니다. 마음에 드셨으면 좋겠습니다.