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循环单击
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
#div1{
position: absolute;
top:0px;
left:0px;
border-radius:256px;
width:256px;
height:256px;
background: #ccc;
overflow: hidden;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="div1">
<img src="a.png">
</div>
</body>
<script>
$('img').toggle(
function(){
this.src='b.png';
},
function(){
this.src='a.png';
}
);
</script>
</html>
循环移入和移出
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
#div1{
position: absolute;
top:0px;
left:0px;
border-radius:256px;
width:256px;
height:256px;
background: #ccc;
overflow: hidden;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="div1">
<img src="a.png">
</div>
</body>
<script>
$('img').hover(
function(){
this.src='b.png';
},
function(){
this.src='a.png';
}
);
</script>
</html>