JavaScript实现透明背景切换

最新推荐文章于 2022-07-06 21:44:20 发布

Richard_Jason

最新推荐文章于 2022-07-06 21:44:20 发布

阅读量779

点赞数

本文链接：https://blog.csdn.net/Richard_Jason/article/details/45845865

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title> </title>

<meta name="description" content="">




<style type="text/css">
/*全局样式*/
*{margin:0px;padding:0px;}
/*以“.”开头的css样式称之为类样式*/
.banner{width:100%;height:32px;background:url("images/1.jpg") no-repeat;
background-position:top center;padding-top:360px;
}
.banner .btn{width:87px;height:30px;margin:0 auto;}
.banner .btn ul li{list-style:none;float:left;
width:16px;height:16px;background:url("images/1.png") no-repeat;padding-left:10px;
background-position:center center;
}
.banner .btn ul .xz{background:url("images/2.png") no-repeat;
background-position:center center;
}

</style>

</head>
<body>



<div class="banner">
<div class="btn">

<ul id="sel">
<li code="1" class="xz"></li>
<li code="2"></li>
<li code="3"></li>
</ul>
</div>
</div>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sel").find("li").mouseover(function(){
var code = $(this).attr("code");
$(this).addClass("xz").siblings().removeClass("xz");
// fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。
$(".banner").fadeOut(500,function(){
//fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
$(this).css("background","url(images/"+code+".jpg) no-repeat top center").fadeIn(500);
})
});
});
</script>

</body>
</html>

Richard_Jason

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现透明背景切换

/*全局样式*/*{margin:0px;padding:0px;}/*以“.”开头的css样式称之为类样式*/.banner{width:100%;height:32px;background:url("images/1.jpg") no-repeat;background-position:top center;padding-top:360px;}.banner
复制链接

扫一扫