js写的小东西

以前刚学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>


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值