jquery导航实现图片滚动并放大效果
2013-06-04 12:57
961 查看
jquery导航目录实现图片左右滚动并放大效果
使用方法:
1.引入jQuery类库和相关css
<div class="sliderbox"> <div id="btn-left" class="arrow-btn dasabled"></div> <div class="slider"> <ul> <li><a href="http://www.jqdemo.com/" target="_blank"><img src="images/go-launcher-ex.jpg"/></a></li> <li><a href="http://www.jqdemo.com/" target="_blank"><img src="images/go-sms.jpg"/></a></li> </ul> </div> <div id="btn-right" class="arrow-btn"></div> </div>
3.使用jQuery方法:
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); });原文转自:jquery导航实现图片滚动并放大效果
相关文章推荐
- jquery实现图片水平滚动效果代码分享
- jQuery动画效果实现图片无缝连续滚动
- jquery实现图片滚动效果
- jquery实现可控方向的图片滚动效果
- jQuery实现背景弹性滚动的导航效果
- jquery实现图片左右滚动效果
- jquery实现图片滚动效果的简单实例
- jquery 实现无间图片文字向上滚动效果
- js+jquery+html实现在三种不通的情况下,点击图片放大的效果
- 一个jquery实现的不错的多行文字图片滚动效果
- JQuery实现图片放大的动态菜单效果
- jQuery轮播图效果+ bxCarousel实现图片滚动切换效果+Mootools Videobox实现视频图片弹出类lightbox效果
- 基于 jQuery 实现的精致作品集图片导航效果
- jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
- jQuery+CSS实现的图片滚动效果
- jquery实现图片水平滚动效果代码分享
- jquery实现的图片点击滚动效果
- 参考课堂案例jquery图片滚动效果实现微博首页内容滚动效
- jquery实现多行文字图片滚动效果示例代码
- JQuery实现操作Checkbox,Table,鼠标放在图片上放大效果