jquery-11 jquery中的事件切换如何实现

2018/06/29 13:02
阅读数 14

jquery-11 jquery中的事件切换如何实现

一、总结

一句话总结:事件切换hover()和toggle()函数。参数两个,都是函数,依次执行两个函数。

 

1、如何实现单击切换图片?

用toggle()方法,参数为两函数

26 $('img').toggle( 27 function(){ 28 this.src='b.png'; 29  }, 30 function(){ 31 this.src='a.png'; 32  } 33 );

 

2、如何实现谋元素鼠标移入和移出执行不同的函数?

用hover()方法

26 $('img').hover( 27 function(){ 28 this.src='b.png'; 29  }, 30 function(){ 31 this.src='a.png'; 32  } 33 );

 

3、如何实现某个元素交替执行不同的方法?

用toggle()方法,参数为两函数

26 $('img').toggle( 27 function(){ 28 this.src='b.png'; 29  }, 30 function(){ 31 this.src='a.png'; 32  } 33 );

 

 

二、jquery中的事件切换如何实现

4.事件切换
hover();
toggle();

toggle循环单击

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>index</title>
 6     <style>
 7         #div1{
 8             position: absolute;
 9             top:0px;
10             left:0px;
11             border-radius:256px;
12             width:256px;
13             height:256px;
14             background: #ccc;
15             overflow: hidden;
16         }
17     </style>
18     <script src="jquery.js"></script>
19 </head>
20 <body>
21     <div id="div1">
22          <img src="a.png">
23     </div>
24 </body>
25 <script>
26 $('img').toggle(
27     function(){
28         this.src='b.png';
29     },
30     function(){
31         this.src='a.png';
32     }
33 );
34 </script>
35 </html>

 

 

循环移入和移出

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>index</title>
 6     <style>
 7         #div1{
 8             position: absolute;
 9             top:0px;
10             left:0px;
11             border-radius:256px;
12             width:256px;
13             height:256px;
14             background: #ccc;
15             overflow: hidden;
16         }
17     </style>
18     <script src="jquery.js"></script>
19 </head>
20 <body>
21     <div id="div1">
22          <img src="a.png">
23     </div>
24 </body>
25 <script>
26 $('img').hover(
27     function(){
28         this.src='b.png';
29     },
30     function(){
31         this.src='a.png';
32     }
33 );
34 </script>
35 </html>

 

 

 

 
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部