jquery图片滚动放大代码分享（1）
更新时间：2015年08月25日 10:06:53 投稿：lijiao
这篇文章主要介绍了jquery图片滚动放大效果，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。
本文实例讲述了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="https://www.jb51.net/" target="_blank"><img src="images/go-launcher-ex.jpg"/></a></li>
<li><a href="https://www.jb51.net/" target="_blank"><img src="images/go-sms.jpg"/></a></li>
<li><a href="https://www.jb51.net/" target="_blank"><img src="images/imgwww20120104173328332830083.png"/></a></li>
<li><a href="https://www.jb51.net/" target="_blank"><img src="images/imgwww20120222114514451461239.jpg"/></a></li>
<li><a href="https://www.jb51.net/" target="_blank"><img src="images/ggbook.jpg"/></a></li>
<li><a href="https://www.jb51.net/" target="_blank"><img src="images/imgwww20120621153035303523388.png"/></a></li>
<li><a href="https://www.jb51.net/" target="_blank"><img src="images/lianxiren.jpg"/></a></li>
<li><a href="https://www.jb51.net/" target="_blank"><img src="images/go-touch.jpg"/></a></li>
<li><a href="https://www.jb51.net/" target="_blank"><img src="images/3g-android-market.jpg"/></a></li>
<li><a href="https://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图片滚动放大效果代码，希望大家可以喜欢。
相关文章
这篇文章主要介绍了jQuery EasyUI之DataGrid使用实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
基于jquery的button默认enter事件(回车事件)。
这里我介绍一下，button按钮默认回车（enter）事件。如果大家可以用submit，就不用看以下代码，因为submit可以直接默认回车事件（enter）2011-05-05
下面小编就为大家带来一篇jQuery数组处理函数整理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了jQuery回调函数的定义及用法,以实例形式详细分析了回调函数的原理与实现技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
瀑布流触发分页可以理解为微博中的浏览效果、到一定程度时显示页数进行分页,而分页触发瀑布流可以理解为Twitter拉到一页设定的最大条数后继续用瀑布流展示下一页,接下来我们就来详细看看AJAX实现瀑布流触发分页与分页触发瀑布流的方法2016-05-05
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。这篇文章主要介绍了DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）,需要的朋友可以参考下2016-11-11
昨天晚上公司遇到个小需求，就是实现类似表格冻结顶栏的效果。这篇文章主要介绍了jQuery实现表格冻结顶栏效果 ,需要的朋友可以参考下2017-08-08
uploadify插件配置实用比较简单，很多开发者都喜欢使用。但是它有个缺点就是刚加载的时候稍微慢了一秒左右，本文通过一段代码实例给大家介绍uploadify多文件上传参数设置技巧，朋友们一起学习吧2015-11-11
本文为大家详细介绍下jQuery拖曵的简单实例，具体的实现思路及代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
这篇文章主要介绍了jQuery实现字符串全部替换的方法,结合实例形式对比分析了使用Replace进行替换的方法及使用正则进行全部替换的相关操作技巧,需要的朋友可以参考下2016-12-12
最新评论