javascript 像素拼图实现代码- Javascript

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

Javascript: JavaScript 自动完成脚本整理(33个); 7个Javascript地图脚本整理; JavaScript 事件记录使用说明; Javascript remove 自定义数组删除方法; fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法; Jquery Ajax.ashx 高效分页实现代码; extjs 学习笔记四带分页的grid; javascript void(0)的妙用; 用Javascript 编写可以缓慢弹出收缩的层; 再谈ie和firefox下的document.all属性; JavaScript 常用函数库详解; JS 截取字符串substr 和 substring方法的区别; Domino中运用jQuery读取视图内容的方法; Js+CSS 文字渐隐渐现显示; Javascript 小写字母依次变为大写; JavaScript 炫彩的文字; javascript 洒脱飘动的文字; JavaScript 平滑文字闪烁; 仿打字特效的JS逐字出现的信息文字; JavaScript数组应用可依次读取的公告栏文字

No. « ‹ 264 265 266 267 › »

技术文章搜索

关键字

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

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

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