javascript 像素拼图实现代码- Javascript

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

Javascript: 在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码; 用Javascript读取中文COOKIE的解决办法; 功能很全的精品JS计算器; 永不消失的title提示代码; 一直复略了的一个问题，关于表单重复提交; 初探jquery——表单应用范例; 懒就要懒到底——鼠标自动点击（含时间判断）; 关于表单的两点交互体验改进技巧; javascript知识点收藏; 用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1; 如何使页面打开时input就被选中？; 点选TOP后并不是直接跳到页顶的，而是滚动上去的; js玩一玩WSH吧; 【最新漏洞】IE中使用Rds.DataSpace下载并运行病毒文件; select选择事件问题; SUN的《AJAX与J2EE》全文译了; 你真的了解JavaScript吗？; 极酷的javascirpt，让你随意编辑任何网页; 用javascript编写的第一人称射击游戏; 轻轻松松学习JavaScript

No. « ‹ 49 50 51 52 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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