请教一个鼠标滚轮事件的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> 展开
<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> 展开
展开全部
<!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>
滚轮滑动时,如果是大图,就会变成缩略图,我删了一点东西。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询