JavaScript 九宫格图像的显示
关键词：
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
http://www.w3.org/1999/xhtml"
script
function imgs_9gg_obj(id){
return document.getElementById(id);
}
function imgs_9gg_main(id,imgs_strs,imgs_urls){
var htmls = "";
imgs_strs_array = imgs_strs.split("|");
imgs_urls_array = imgs_urls.split("|");
var imgs_counts = imgs_strs_array.length;
var imgs_src = "";
for(var i=0;i imgs_src = imgs_strs_array[i].replace("smalls","bigs");
htmls += "
onclick="javascript:imgs_9gg_ones(’"+imgs_src+"’,’"+imgs_urls_array[i]+"’,’"+id+"’);"";
}
htmls += "
";
// htmls += "
";
imgs_9gg_obj(id).innerHTML = htmls;
}
function imgs_9gg_ones(imgs_src,imgs_urls,id){
imgs_9gg_obj(id+"_imgsimgs").src = imgs_src;
imgs_9gg_obj(id+"_imgsimgs_urls").href = imgs_urls;
imgs_9gg_obj(id+"_imgsimgs_urls").target = "_blank";
imgs_9gg_obj(id+"_imgsdivs").style.display = "block";
}
function imgs_9gg_ones_hidden(id){
imgs_9gg_obj(id+"_imgsdivs").style.display = "none";
}
/script
style
#imgs_9gg_boxs{
float:left;
width:238px;
height:238px;
background-color:#EEEEEE;
}
#imgs_9gg_boxs li{
float:left;
width:75px;
margin-left:3px;
margin-top:3px;
text-align:center;
}
#imgs_9gg_boxs li img{
width:75px;
height:75px;
cursor:hand;
}
#imgs_9gg_boxs_imgsdivs{
display:none;
float:left;
z-index:100;
width:238px;
text-align:center;
position:relative;
top:-200px;
}
#imgs_9gg_boxs_imgsdivs img{
width:180px;
height:180px;
cursor:hand;
}
/style
var imgs_strs = "./imgs/smalls_1.jpg|./imgs/smalls_2.jpg|./imgs/smalls_3.jpg|./imgs/smalls_4.jpg|
./imgs/smalls_5.jpg|./imgs/smalls_6.jpg|./imgs/smalls_7.jpg|./imgs/smalls_8.jpg|./imgs/smalls_9.jpg";
var imgs_urls = "http://www.1.com|http://www.1.com|http://www.2.com|http://www.3.com|http://www.4.com|
http://www.5.com|http://www.6.com|http://www.7.com|http://www.8.com|http://www.9.com";
imgs_9gg_main("imgs_9gg_boxs",imgs_strs,imgs_urls);
http://www.w3.org/1999/xhtml"
script
function imgs_9gg_obj(id){
return document.getElementById(id);
}
function imgs_9gg_main(id,imgs_strs,imgs_urls){
var htmls = "";
imgs_strs_array = imgs_strs.split("|");
imgs_urls_array = imgs_urls.split("|");
var imgs_counts = imgs_strs_array.length;
var imgs_src = "";
for(var i=0;i imgs_src = imgs_strs_array[i].replace("smalls","bigs");
htmls += "
onclick="javascript:imgs_9gg_ones(’"+imgs_src+"’,’"+imgs_urls_array[i]+"’,’"+id+"’);"";
}
htmls += "
";
// htmls += "
";
imgs_9gg_obj(id).innerHTML = htmls;
}
function imgs_9gg_ones(imgs_src,imgs_urls,id){
imgs_9gg_obj(id+"_imgsimgs").src = imgs_src;
imgs_9gg_obj(id+"_imgsimgs_urls").href = imgs_urls;
imgs_9gg_obj(id+"_imgsimgs_urls").target = "_blank";
imgs_9gg_obj(id+"_imgsdivs").style.display = "block";
}
function imgs_9gg_ones_hidden(id){
imgs_9gg_obj(id+"_imgsdivs").style.display = "none";
}
/script
style
#imgs_9gg_boxs{
float:left;
width:238px;
height:238px;
background-color:#EEEEEE;
}
#imgs_9gg_boxs li{
float:left;
width:75px;
margin-left:3px;
margin-top:3px;
text-align:center;
}
#imgs_9gg_boxs li img{
width:75px;
height:75px;
cursor:hand;
}
#imgs_9gg_boxs_imgsdivs{
display:none;
float:left;
z-index:100;
width:238px;
text-align:center;
position:relative;
top:-200px;
}
#imgs_9gg_boxs_imgsdivs img{
width:180px;
height:180px;
cursor:hand;
}
/style
var imgs_strs = "./imgs/smalls_1.jpg|./imgs/smalls_2.jpg|./imgs/smalls_3.jpg|./imgs/smalls_4.jpg|
./imgs/smalls_5.jpg|./imgs/smalls_6.jpg|./imgs/smalls_7.jpg|./imgs/smalls_8.jpg|./imgs/smalls_9.jpg";
var imgs_urls = "http://www.1.com|http://www.1.com|http://www.2.com|http://www.3.com|http://www.4.com|
http://www.5.com|http://www.6.com|http://www.7.com|http://www.8.com|http://www.9.com";
imgs_9gg_main("imgs_9gg_boxs",imgs_strs,imgs_urls);
感谢您对翰文计算机学习网的支持