jquery导航实现图片滚动并放大效果

最新推荐文章于 2024-11-02 10:41:01 发布

weixin_30756499

最新推荐文章于 2024-11-02 10:41:01 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jqdemo/archive/2013/06/04/3116897.html

本文介绍了一种使用jQuery实现的图片导航效果，该效果包括图片左右滚动及鼠标悬停时图片放大功能。通过简单的HTML结构配合jQuery动画效果，能够轻松为网站增添交互感。

jquery导航目录实现图片左右滚动并放大效果

使用方法:

1.引入jQuery类库和相关css

<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

2.定义内容

<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导航实现图片滚动并放大效果

转载于:https://www.cnblogs.com/jqdemo/archive/2013/06/04/3116897.html