- <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进行渐变操作；
