<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
#i1{
width: 400px;
height: 400px;
float: left;
}
#i2{
width: 200px;
height: 200px;
float: left;
}
#i3{
width: 200px;
height: 200px;
position: absolute;
top: 200px;
left: 400px;
}
</style>
</head>
<body>
<img src="1.jpg" alt="" id="i1">
<img src="2.jpg" alt="" id="i2" οnclick="Myclick(this)">
<img src="3.jpg" alt="" id="i3" οnclick="Myclick(this)">
<script>
function Myclick(ele) {
// 第一步要先拿到i1的对象
var obj=document.getElementById('i1');
// temp创建临时对象
var osrc=obj.src;
// 第二步获取ele的地址
obj.src=ele.src;
//第三步 ele的对象值应该是temp变量中的
ele.src=osrc;
}
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.i1{
width: 400px;
height: 400px;
float: left;
}
.i2{
width: 200px;
height: 200px;
float: left;
}
.i3{
width: 200px;
height: 200px;
position: absolute;
top: 200px;
left: 400px;
}
</style>
</head>
<body>
<img src="1.jpg" alt="" class="i1">
<img src="2.jpg" alt="" class="i2" οnclick="Myclick(this)">
<img src="3.jpg" alt="" class="i3" οnclick="Myclick(this)">
<script>
function Myclick(ele) {
var obj=document.getElementsByClassName('i1');
var osrc=obj.className;
var obj1=obj;
obj.className=ele.className;
obj1.className=obj.className;
ele.className=osrc;
}
</script>
</body>
</html>
1318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
