javascript 像素拼图实现代码- Javascript

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

Javascript: 用new Image()预先加载图片真的有用吗？; 超级susymenu实现top菜单; 新版本susymenu树形菜单，请大家指教、分享; javascript入门·图片对象(无刷新变换图片)\滚动图像; 国外Lightbox v2.03.3 最新版下载; javascript渐变显示的雅虎中国选项卡效果代码; 用javascript来实现select标签的美化的代码; 用javascript实现改善用户体验之alert提示效果; Auntion-TableSort javascript类文件; javascript 新闻切换技术; JS代码判断集锦大全; [原创]用javascript实现检测指定目录是否存在的方法; JavaScript中的其他对象; [原创]来自ImageSee官方 JavaScript图片浏览器; 用js 让图片在 div或dl里　居中，底部对齐; 网页代码常用小技巧总结; 可以自动轮换的页签 tabs with auto play fucntion; js判断一点是否在一个三角形内; DHTML Slide Show script图片轮换; JS event使用方法详解

No. « ‹ 196 197 198 199 › »

技术文章搜索

关键字

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

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

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