JQuery实现背景图片渐变！

最新推荐文章于 2019-05-28 20:38:14 发布

强者YDY

最新推荐文章于 2019-05-28 20:38:14 发布

阅读量5.5k

点赞数

分类专栏： jquery用法文章标签： div背景渐变 jquery

jquery用法专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery的强大，虽谈不上是对页面开发的伟大变革，但是，灵活应用JQuery，亦能产生意想不到的效果。

今天我们就来看看JQuery是怎样实现页面背景图片切换的效果的：

代码如下：

[javascript]view plaincopy 
    
 <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>  