<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>javascript点小图出大图 练习 by 阿会楠</title>
<style type="text/css">
#imgList li img{
width:80px;
height:80px;
border:1px solid #cccccc;
}
ul li{
list-style:none;
float:left;
margin-left:30px;
cursor:pointer;
}
.rborder{
border:1px solid yellow;
}
</style>
<script language="JavaScript" type="text/javascript">
var img = new Array();
img[0] = "images/car.JPG";
img[1] = "images/weixiu.jpg";
img[2] = "images/zhuce.jpg";
function $(obj){
return document.getElementById(obj);
}
function $img(url){
return "<img src='" + url + "' οnclick='changeborder(this)' />";
}
function changeborder(obj){
for(var j = 0;j < img.length;j++){
$("imgList").getElementsByTagName("li")[j].getElementsByTagName("img")[0].style.borderColor = "#cccccc";
}
obj.style.borderColor= "red";
$("bImg").innerHTML = $img(obj.src);
}
window.onload = function(){
for(var i = 0;i < img.length;i++){
$("imgList").innerHTML += "<li>" + $img(img[i]) + "</li>";
}
if($("bImg").innerHTML == ""){
$("bImg").innerHTML = $img(img[0]);
$("imgList").getElementsByTagName("li")[0].getElementsByTagName("img")[0].style.borderColor = "red";
}
}
</script>
</head>
<body>
<div id="bImg"></div>
<ul id="imgList"></ul>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>javascript点小图出大图 练习 by 阿会楠</title>
<style type="text/css">
#imgList li img{
width:80px;
height:80px;
border:1px solid #cccccc;
}
ul li{
list-style:none;
float:left;
margin-left:30px;
cursor:pointer;
}
.rborder{
border:1px solid yellow;
}
</style>
<script language="JavaScript" type="text/javascript">
var img = new Array();
img[0] = "images/car.JPG";
img[1] = "images/weixiu.jpg";
img[2] = "images/zhuce.jpg";
function $(obj){
return document.getElementById(obj);
}
function $img(url){
return "<img src='" + url + "' οnclick='changeborder(this)' />";
}
function changeborder(obj){
for(var j = 0;j < img.length;j++){
$("imgList").getElementsByTagName("li")[j].getElementsByTagName("img")[0].style.borderColor = "#cccccc";
}
obj.style.borderColor= "red";
$("bImg").innerHTML = $img(obj.src);
}
window.onload = function(){
for(var i = 0;i < img.length;i++){
$("imgList").innerHTML += "<li>" + $img(img[i]) + "</li>";
}
if($("bImg").innerHTML == ""){
$("bImg").innerHTML = $img(img[0]);
$("imgList").getElementsByTagName("li")[0].getElementsByTagName("img")[0].style.borderColor = "red";
}
}
</script>
</head>
<body>
<div id="bImg"></div>
<ul id="imgList"></ul>
</body>
</html>
2809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
