jquery图片滚动放大代码分享（1）

2019-11-20 11:43:38

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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="//www.VeVB.COm/" target="_blank"><img src="images/go-launcher-ex.jpg"/></a></li> <li><a href="//www.VeVB.COm/" target="_blank"><img src="images/go-sms.jpg"/></a></li> <li><a href="//www.VeVB.COm/" target="_blank"><img src="images/imgwww20120104173328332830083.png"/></a></li> <li><a href="//www.VeVB.COm/" target="_blank"><img src="images/imgwww20120222114514451461239.jpg"/></a></li> <li><a href="//www.VeVB.COm/" target="_blank"><img src="images/ggbook.jpg"/></a></li> <li><a href="//www.VeVB.COm/" target="_blank"><img src="images/imgwww20120621153035303523388.png"/></a></li> <li><a href="//www.VeVB.COm/" target="_blank"><img src="images/lianxiren.jpg"/></a></li> <li><a href="//www.VeVB.COm/" target="_blank"><img src="images/go-touch.jpg"/></a></li> <li><a href="//www.VeVB.COm/" target="_blank"><img src="images/3g-android-market.jpg"/></a></li> <li><a href="//www.VeVB.COm/" 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图片滚动放大效果代码，希望大家可以喜欢。

上一篇：JS+CSS实现滑动切换tab菜单效果

下一篇：jquery实现在网页指定区域显示自定义右键菜单效果