JQuery实现背景图片渐变！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery实现背景图片渐变！相关的知识，希望对你有一定的参考价值。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQuery实现背景图片渐变</title>
<script type="text/javascript" src="jquery.js" mce_src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sub").css("left",$("#super").offset().left);
$("#sub").css("top", $("#super").offset().top);
$("#super").css("background-image","url(img_01.jpg)");
$("#sub").css("background-image","url(img_02.jpg)");
$(‘#sub‘).css(‘opacity‘, 0);
$("#sub").hover(
function() {
$("#super").stop().animate({opacity: ‘0‘},500);
$("#sub").stop().animate({opacity: ‘1‘},500);
},
function() {
$("#sub").stop().animate({opacity: ‘0‘},500);
$("#super").stop().animate({opacity: ‘1‘},500);
});
}
);
</script>
<style>
#super{
width:900px;
height:400px;
}
#sub {
width:900px;
height:400px;
position:absolute;
}
</style>
</head>
<body>
<div id="super"></div><div id="sub"></div>
</body>
</html>
简单注释：

    背景渐变切换，首先要准备两个div标签，主要，这两个标签一个是主要div，一个用来掩盖原来背景的div，因此第二个div的position属性应该设置为：absolute；

    在Jquery代码里面，

    1.设定第二个div与第一个div重合；

    2.分别给两个div赋上背景图片，并设第二个div的透明属性为0，即：完全透明；

    3.在第二个div加上hover函数，分别对两个div进行渐变操作；

以上是关于JQuery实现背景图片渐变！的主要内容，如果未能解决你的问题，请参考以下文章