快捷導(dǎo)航

javascript 像素拼圖實現(xiàn)代碼

更新時間：2009年04月20日 15:56:24 作者：

非常不錯的像素拼圖效果

<!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>  </head> <body> <div   id="wppm3vysvbp"   class="container" id="container"></div> <div   id="wppm3vysvbp"   class="caption" id="caption"> <h2>說明</h2> <ul> <li>1.移動鼠標在網(wǎng)頁方格里點擊，拼出圖形。</li> <li>2.如果對某個點不滿意，再次點擊，即可消除。</li> <li>3.如果想重新開始，請點擊這里：<input type="button" value="重新開始" class="inputbutton"/> 或者重新設(shè)置：<input type="text" class="inputtxt"/> 列 <input type="text" class="inputtxt" /> 行 <input type="button" value="重新生成" class="inputbutton" /></li> </ul> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

JS獲取和修改元素樣式的實例代碼
下面小編就為大家?guī)硪黄狫S獲取和修改元素樣式的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
JavaScript Date 知識淺析
這篇文章主要介紹了JavaScript Date 知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-01-01
JavaScript實現(xiàn)單擊網(wǎng)頁任意位置打開新窗口與關(guān)閉窗口的方法
這篇文章主要介紹了JavaScript實現(xiàn)單擊網(wǎng)頁任意位置打開新窗口與關(guān)閉窗口的方法,涉及javascript窗口的相關(guān)操作函數(shù)與使用技巧,需要的朋友可以參考下
2017-09-09
Javascript 命名空間模式
命名空間是通過為項目或庫創(chuàng)建一個全局對象，然后將所有功能添加到該全局變量中。通過減少程序中全局變量的數(shù)量，實現(xiàn)單全局變量，從而在具有大量函數(shù)、對象和其他變量的情況下不會造成全局污染，同時也避免了命名沖突等問題
2013-11-11
js將字符轉(zhuǎn)換為UTF-8字符的工具
在下面的文本框中輸入中文文字，按“轉(zhuǎn)化”，即可將其轉(zhuǎn)化為UTF-8字符。
2010-06-06
js獲取瀏覽器的可視區(qū)域尺寸的實現(xiàn)代碼
js獲取瀏覽器的可視區(qū)域尺寸的實現(xiàn)代碼，需要的朋友可以參考下。
2011-11-11
JavaScript檢查數(shù)據(jù)中是否存在相同的元素（兩種方法）
這篇文章主要介紹了JavaScript檢查數(shù)據(jù)中是否存在相同的元素（兩種方法）,需要的朋友可以參考下
2018-10-10
javascript的console.log()用法小結(jié)
console.log 原先是 Firefox 的專利，嚴格說是安裝了 Firebugs 之后的 Firefox 所獨有的調(diào)試絕招
2012-05-05
Three.js實現(xiàn)3D乒乓球小游戲(物理效果)
本文將使用React Three Fiber 和 Cannon.js 來實現(xiàn)一個具有物理特性的乒乓球小游戲，使用 React Three Fiber 搭建基礎(chǔ)三維場景、如何使用新技術(shù)棧給場景中對象的添加物理特性等，最后利用上述知識點，將開發(fā)一個簡單的乒乓球小游戲,需要的朋友可以參考下
2023-03-03
用javascript做拖動布局的思路
這幾天不是很忙，就找了些拖動布局方面的資料看看，也學(xué)著寫了個拖動布局的效果，沒想到花了好多時間，七拼八湊，總算是把這個效果寫出來了。哎！還是js的功夫太差。因為是邊找資料邊寫的，很多地方印象不深，時間一長，再重新寫估計也難，所以把當時的思路記錄一下！也希望大蝦指點一下！
2008-05-05