Big Bug Ban

兴趣 践行 创新

jquery实现的图片切换效果

 

发一个以前做的东西..或与大家用得上.

示例地址

代码如下

01 <script language="javascript">
02 $("#test").animate({left:"900px"},1).animate({left:"1px"},500)
03 var on=0;
04 $(document).ready(
06                 function(){$("#main").mouseenter(function() {
07                         if(on==0){
08                             //
09                             $("#img").fadeOut("fast",function(){
10                             $("#img-hover").fadeIn("slow");
11                             on=1;
12                         });
13                         //
14                         $("#leftbar").animate({height:"1px"},1).animate({height:"264px"},500)
15                         $("#topbar").animate({width:"1px"},1).animate({width:"170px"},500)
16                         $("#rightbar").animate({height:"1px"},1).animate({height:"264px"},500)
17                         $("#bottombar").animate({width:"1px"},1).animate({width:"170px"},500)
18                         }
19                     });
20                 $("#main").mouseleave(function() {
21                         //
22                         if(on==1){
23                         $("#img-hover").fadeOut("slow",function(){
24                             $("#img").fadeIn("fast");
25                             on=0;
26                         });
27                         //
28                         $("#leftbar").animate({height:"264px"},1).animate({height:"1px"},500)
29                         $("#topbar").animate({width:"170px"},1).animate({width:"1px"},500)
30                         $("#rightbar").animate({height:"264px"},1).animate({height:"1px"},500)
31                         $("#bottombar").animate({width:"170px"},1).animate({width:"1px"},500)
32                         }
33                     });              
34                  });
35 </script>

没有加注释..昂昂

Written by princehaku

7月 2nd, 2010 at 8:23 上午

Posted in webbuild

Tagged with ,

without comments

Leave a Reply