请教一个鼠标滚轮事件的js 100

下面是头部广告图代码,点击后能大小伸缩,如何在原有效果不变的基础上加上这个js效果:当鼠标滚轮滚动,广告图片则自动变成缩略图,这样就不会影响到我网站布局,本人新手求详解<... 下面是头部广告图代码,点击后能大小伸缩,如何在原有效果不变的基础上加上这个js效果:当鼠标滚轮滚动,广告图片则自动变成缩略图,这样就不会影响到我网站布局,本人新手求详解
<div class="advbox">
<div class="dt_small" style="display:none;">
<div class="dt_toBig" style="display:none;"></div>
<a href="#" target="_blank"><img src="images/1325.jpg" width="100%" height="60" alt="广告图片缩略图" /></a>
</div>
<div class="dt_big">
<div class="dt_toSmall"></div>
<a href="#" target="_blank"><img id="actionimg" src="images/sa11.jpg" width="100%" height="500" alt="广告图片大图" /></a>
</div>
</div>

<script type="text/javascript">
function AdvClick(){
var a=1500;
var b=3*1000;
$(".dt_toSmall").click(function(){
$(".dt_small").delay(a).slideDown(a);
$(".dt_big").stop().slideUp(a);
$(".dt_toSmall").stop().fadeOut(0);
$(".dt_toBig").delay(a*2).fadeIn(0)
});$
(".dt_toBig").click(function(){
$(".dt_big").delay(a).slideDown(a);
$(".dt_small").stop().slideUp(a);
$(".dt_toBig").stop().fadeOut(0);
$(".dt_toSmall").delay(a*2).fadeIn(0)
})
}

function AdvAuto(){
if($(".dt_big").length>0){
var a=1500;
var b=3*1000;
$(".dt_big").delay(b).slideUp(a,function(){
$(".dt_small").slideDown(a);
$(".dt_toBig").delay(a).fadeIn(0)
});
$(".dt_toSmall").delay(b).fadeOut(0)
}
}

</script>

<script type="text/javascript">
$(document).ready(function(){
AdvClick();
});
//顶部通览可展开收起效果
if($("#actionimg").length>0){
$("#actionimg").onload=AdvAuto();
}
</script> 展开

 我来答

1个回答

#热议# 普通体检能查出癌症吗？

好求知
2014-12-24 · TA获得超过6515个赞

知道大有可为答主

回答量：966

采纳率：80%

帮助的人：1167万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>测试</title>
	<script type="text/javascript" src="file:///E:/html/Tool/js/jquery-1.4.1.min.js"></script>
</head>
<body>
	<div class="advbox">
	<div class="dt_small" style="display:none;">
		<a><img src="images/1325.jpg" width="100%" height="60" alt="广告图片缩略图" /></a>
	</div>
	<div class="dt_big">
		<a><img id="actionimg" src="images/sa11.jpg" width="100%" height="500" alt="广告图片大图" /></a>
	</div>
</div>

<script type="text/javascript">
var a=500;
var b=1000;

function toBig(){
	$(".dt_big").delay(a).slideDown(a);
	$(".dt_small").stop().slideUp(a);
}
function toSmall(){
	$(".dt_small").delay(a).slideDown(a);
	$(".dt_big").stop().slideUp(a);
}
function AdvClick(){
	$(".dt_big").click(toSmall);
	$(".dt_small").click(toBig);
	//绑定滚轮事件
	$(document).bind('mousewheel', function(event) {
		if ((event.wheelDelta && event.wheelDelta < 0) //IE向下滚动
			|| (event.detail && event.detail > 0) //Firefox向下滚动
		) {
			if (!$(".dt_big").is(":hidden"))
				toSmall();
		}
		return false;
	});
}

function AdvAuto(){
	if($(".dt_big").length>0){
		var a=500;
		var b=1000;
		$(".dt_big").delay(b).slideUp(a,function(){
			$(".dt_small").slideDown(a);
		});
	}
}

</script>

<script type="text/javascript">
$(document).ready(AdvClick);
//顶部通览可展开收起效果
if($("#actionimg").length>0){	
	$("#actionimg").onload=AdvAuto();
}
</script>
</body>
</html>

滚轮滑动时，如果是大图，就会变成缩略图，我删了一点东西。

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

请教一个鼠标滚轮事件的js 100

其他类似问题

为你推荐：