javascript 像素拼图实现代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 像素拼图实现代码

Javascript: 可实现多表单提交的javascript函数; 比较详细的关于javascript中void(0)的具体含义解释; 随机显示经典句子或诗歌的javascript脚本; javascript实现的多条新闻公告系统; 解析arp病毒背后利用的Javascript技术附解密方法; 比较详细的javascript对象的property和prototype是什么一种关系; 访问百度和谷歌网速测试的javascript代码; javascript 动态改变层的Z-INDEX的代码style.zIndex; javascript+css实现单击颜色褪去效果; javascript 表单日期选择效果; 比较简单的javascript实现input双击后可以编辑; javascript实现的颜色块滑动的动态效果; js实现网页检测是否安装了 Flash Player 插件; javascript 实现父窗口引用弹出窗口的值的脚本; javascript 实现双击才能打开链接的方法; 用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载; document.createElement("A")比较不错的属性; 用javascript实现不按Ctrl实现Multiple Select多选; JavaScript-世界上误解最深的语言分析; IE和Mozilla的兼容性汇总event

No. « ‹ 76 77 78 79 › »

技术文章搜索

关键字

Javascript 中的 javascript 像素拼图实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 382 ::

收藏到网摘: n/a

仿淘宝首页分类列表效果实现代码 javascript+css 新闻显示tab 选项卡效果

非常不错的像素拼图效果

点击运行可以看到效果:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript像素拼图游戏</title>
<style type="text/css" media="all">
body{
margin:0px;
padding:0px;
background-color:#111111;
font-family:Arial, Helvetica, sans-serif,"宋体";
}
.container{
background-color:#CCCCCC;
padding:0px 0px 0px 1px;
width:609px;
margin:0px auto;
font-size:12px;
height:auto;
overflow:hidden;
}
.container .line,.container .line2{
width:100%;
height:auto;
overflow:hidden;
}
.container .line2 a{
color:#ababab;
background-color:#666666;
}
.container a{
display:block;
float:left;
background-color:#999999;
margin-right:1px;
margin-top:1px;
width:28px;
text-align:center;
padding:4px 0px;
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
cursor:pointer;
}
.caption{
margin:0px auto;
width:608px;
height:auto;
overflow:hidden;
padding:1px;
background-color:#CCCCCC;
}
.caption h2{
margin:0px;
padding:3px;
text-align:center;
font-size:12px;
background-color:#666666;
}
.caption ul{
margin:0px;
padding:0px 16px;
list-style:none;
line-height:22px;
font-size:12px;
}
.inputtxt{
width:30px;
height:12px;
font-size:12px;
color:#FF6600;
font-weight:bold;
text-align:center;
}
.inputbutton{border:#666666 1px solid;height:18px;}
.caption ul a{color:#333333;}
.caption ul li{
border-bottom:#666666 1px dashed;
}
</style>
<script language="javascript" type="text/javascript">
/*===================
copyright:http://www.wxwdesign.cn
转载请保留此信息和作者网站链接
====================*/
window.onload=function(){
var n=22; //默认行数
var L=23; //默认每行显示个数
var acontent="+"; //默认方格里显示的符号
var color=new Array("#ea991f","#cc994b","#ae9979","#999999");
var init=function(num,len){
var content=document.createDocumentFragment();
var firstline=document.createElement("div");
firstline.className="line2";
for(var i=0;i<len;i++){var a=document.createElement("a");a.innerHTML=i+1;firstline.appendChild(a)}
content.appendChild(firstline);
for(var i=0;i<num;i++){var div=document.createElement("div");div.className="line";for(var j=0;j<len;j++){var a=document.createElement("a");a.innerHTML=acontent;div.appendChild(a);};content.appendChild(div);}
getid("container").style.width=String(29*len)+"px";
getid("caption").style.width=String(29*len-1)+"px";
getid("container").appendChild(content);
var a=document.getElementsByTagName("a");
for(var i=21;i<a.length;i++){
a[i].onclick=function(){if(!this.i){this.style.color="#ff0000";this.style.backgroundColor="#FF9900"}else{this.style.color="#FFFFFF";this.style.backgroundColor="#999999"};this.i=!this.i}
a[i].onfocus=function(){this.blur()}
a[i].onmouseover=function(){this.style.backgroundColor="#FF9900"}
a[i].onmouseout=function(){var obj=this;var j=0;function dc(){if(j<color.length&&!obj.i){setTimeout(dc,200);obj.style.backgroundColor=color[j];j++}};dc()};
}}
init(n,L);
function getid(id){return document.getElementById(id)}
var input=document.getElementsByTagName("input");
input[0].onclick=function(){window.location.reload()}
input[3].onclick=function(){getid("container").innerHTML="";init(parseInt(input[2].value),parseInt(input[1].value))}
}
</script>
</head>
<body>
<div class="container" id="container"></div>
<div class="caption" id="caption">
<h2>说明</h2>
<ul>
<li>1.移动鼠标在网页方格里点击，拼出图形。</li>
<li>2.如果对某个点不满意，再次点击，即可消除。</li>
<li>3.如果想重新开始，请点击这里：<input type="button" value="重新开始" class="inputbutton"/> 或者重新设置：<input type="text" class="inputtxt"/> 列 <input type="text" class="inputtxt" /> 行 <input type="button" value="重新生成" class="inputbutton" /></li>
</ul>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

仿淘宝首页分类列表效果实现代码 javascript+css 新闻显示tab 选项卡效果

Javascript 中的 javascript 像素拼图实现代码

评论 (0) All