本文实例讲述了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图片滚动放大效果代码，希望大家可以喜欢。
更多相关内容：
