JQuery實現背景圖片漸變！
阿新 • • 發佈：2018-01-24
side start process log key 圖片 ant -type port
- <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實現背景圖片漸變！