以前刚学js写的玩的。截图:
那时看见qq这样,我就做了一个,当时有兔斯基和这个,但是代码太多改乱了。就保留了一个。很简单,而且没怎么处理图片,有的地方不太规范。
我用的图片名是这么写的:img (45).png。 顺便上来图片包:图片包
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.div2{ text-align:center; font-family:全新硬笔行书简; background-color:#DEEEF7; margin:0 }
.tabs{border-collapse:collapse;}
#divimg{ width:355px; border:1px solid blue; padding:0 15px 15px 15px;background-color:#DEEEF7 ; position:relative;}
.aa{border:1px solid black; background:rgba(255,255,255,1.0)}
.dd{ background:rgba(255,255,255,0.2); width:130px; height:130px; border:1px solid gray; position:absolute; top:0; left:0;}
.dd2{background:rgba(255,255,255,0.2);width:130px; height:130px; border:1px solid gray; position:absolute; top:0; right:0;}
</style>
<script type="text/javascript">
var s=new Array();
s[0]="imgs/img (";
s[1]=").png";
function initEvent(s1,s2){
//创建table(这里可能造成有些浏览器不兼容,最好用insertrow)
var div1 = document.getElementById("divimg");
var ad = document.createElement("table");
ad.setAttribute("cellspacing","0");
ad.setAttribute("cellpadding","2");
ad.className = "tabs";
//加载图片
for (i = 0; i < 5; i++) {
var trs = document.createElement("tr");
for (j = 0; j < 10; j++) {
var tds = document.createElement("td");
trs.appendChild(tds);
var imgs = document.createElement("img");
imgs.src = s1 + i + j + s2;
imgs.setAttribute("width", "30px");
imgs.setAttribute("height", "30px");
tds.appendChild(imgs);
tds.className = "aa";
}
ad.appendChild(trs);
}
div1.appendChild(ad);
//事件开始
var faces = document.getElementsByTagName("img");
for(var j=0;j<50;j++){
faces[j].οnmοuseοver=function(){
var indexsrc = this.src; //当前图片地址
var regex = /.+(\d\d).+/; //正则表达式要获得图片地址中的两位数字
var m = indexsrc.match(regex);
//然后要将数字两位分割后判断第二位是大于还是小于5,判断图片大图是在做表显示还是右边显示
var m2 = m[1].charAt(1); //获得第二位
var facePic = document.getElementById("div2");
if(m2<5){
facePic.className="dd2"; //如果选的左边的图片,预览图图显示在右边
facePic.innerHTML="<img src='" + indexsrc + "'/>";
}
else{
facePic.className="dd"; //如果选的右边的图片,预览图图显示在左边
facePic.innerHTML="<img src='" + indexsrc + "'/>";
}
}
}
}
function fun() {
//初始化
initEvent("imgs/img (", ").png");
}
</script>
</head>
<body οnlοad="fun()">
<div id="divimg">
<div class="div2"><a id="am">默认</a></div>
<div id="div2"></div>
</div>
</body>
</html>