请教一个鼠标滚轮事件的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>
展开
 我来答
好求知
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>

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

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式