点击图片,图片转换
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="图片路径1" id="aa">
<img src="图片路径2" alt="" id="im">
</a>
<script>
var imgObj=document.getElementById("im");
imgObj.onclick=function () {
var aObj=document.getElementById("aa");
this.src=aObj.href;
//阻止跳转事件
return false;
}
</script>
</body>
</html>
鼠标移入移出事件
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv{
width: 200px;;
height: 200px;
background-color: pink;
}
.none{
display: none;
}
</style>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<div id="dv" class="red"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick=function () {
if (this.value=="隐藏") {
my$("dv").className="none"
this.value="显示"
}else if (this.value=="显示"){
my$("dv").className="";
this.value="隐藏"
}
}
</script>
</body>
</html
列表隔行变色、高亮显示
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="a1">
<li>这是第1个列表</li>
<li>这是第2个列表</li>
<li>这是第3个列表</li>
<li>这是第4个列表</li>
<li>这是第5个列表</li>
<li>这是第6个列表</li>
<li>这是第7个列表</li>
</ul>
<script src="common.js"></script>
<script>
var list=my$("a1").getElementsByTagName("li");
for (var i=0;i<list.length;i++){
if (i%2==0){
list[i].style.backgroundColor="red"
} else if (i%2==1){
list[i].style.backgroundColor="blue"
}
}
for (var j=0;j<list.length;j++){
list[j].onmouseover=function () {
this.style.backgroundColor="gold";
}
list[j].onmouseout=function () {
for (var i=0;i<list.length;i++){
if (i%2==0){
list[i].style.backgroundColor="red"
} else if (i%2==1){
list[i].style.backgroundColor="blue"
}
}
}
}
</script>
</body>
</html
5513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
