Archive for the ‘图片’ tag
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>
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>
没有加注释..昂昂