javascript 像素拼图实现代码- Javascript

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

Javascript: 在js中使用"with"语句中跨frame的变量引用问题; 原型方法的不同写法居然会影响调试的解决方法; 在JavaScript中遭遇级联表达式陷阱; JScript内置对象Array中元素的删除方法; 获取JavaScript用户自定义类的类名称的代码; 使用TextRange获取输入框中光标的位置的代码; 使用onbeforeunload属性后的副作用; IE7提供XMLHttpRequest对象为兼容; encode脚本和normal脚本混用的问题与解决方法; 用js判断用户浏览器是否是XP SP2的IE6; 关于使用runtimeStyle属性问题讨论文章; javascript学习随笔(使用window和frame)的技巧; javascript学习随笔(编写浏览器脚本 Navigator Scripting ); 跑马灯效果大全; 让超链接显示提示信息的js代码; 打开超链需要“确认”对话框的方法; javascript的对话框详解与参数; 让网页上的超链接失效，不能点击的js代码; 鼠标经过时链接文字的特别震撼的显示效果; 显示页面的所有链接的js代码

No. « ‹ 53 54 55 56 › »

技术文章搜索

关键字

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

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

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