javascript九宮格圖片隨機(jī)打亂位置的實(shí)現(xiàn)方法
更新時間：2017年03月15日 09:11:58 作者：川信_周靜
這篇文章主要為大家詳細(xì)介紹了javascript九宮格圖片隨機(jī)打亂位置的實(shí)現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天就做個九宮格的簡易拼圖，最讓我頭疼的就是點(diǎn)擊開始打亂圖片位置。一開始在百度查看相關(guān)博客，走了很多彎路。最后看了眾多的例子，自己寫了個方法。
<script>
//打亂圖片方法
function fun(){
var x = [];
var y ;
for(var i=1;i<10;i++){
var div = document.getElementById("d"+i+"");
div.removeChild(document.getElementById("img"+i+""));
}
for(var i=1;i<10;i++){
var img = document.createElement('img'); //動態(tài)創(chuàng)建img標(biāo)簽
var div1 = document.getElementById("d"+i+"");
var p = [1,2,3,4,5,6,7,8,9]; //用p[]數(shù)組保存圖片的代號
var j = Math.round(Math.random()*8); //通過隨機(jī)數(shù)j產(chǎn)生隨機(jī)圖片代號p[j]
for ( var u=0 ; u < x.length ; u++ ) //遍歷x[]數(shù)組防止后面出現(xiàn)與前面一樣的圖片代號
{
if ( x[u] == p[j] )
{
y = x[u];
break;
}
}
if(p[j]==y){
i-=1;
continue;
}else{
img.setAttribute("src","images/tiger_0"+p[j]+".gif");
img.id = "img"+i+"";
}
div1.appendChild(img);
x.push(p[j]); //添加已經(jīng)出現(xiàn)的圖片號數(shù)進(jìn)入x[]數(shù)組
}
dragdrop();//拖動圖片方法
}
</script>
點(diǎn)擊開始可以達(dá)到隨機(jī)打亂圖片位置的效果，如下
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)W習(xí)筆記之函數(shù)定義、頁面渲染圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之函數(shù)定義、頁面渲染,結(jié)合實(shí)例形式較為詳細(xì)的分析了微信小程序中函數(shù)的定義、生命周期、模板調(diào)用、樣式控制等操作技巧,并配合圖文形式進(jìn)行了詳細(xì)說明,需要的朋友可以參考下2019-03-03
百度Popup.js彈出框進(jìn)化版 拖拽小框架發(fā)布 兼容IE6/7/8,Firefox,Chrome
百度空間的彈出窗口和拖拽效果(也就是popup.js),代碼精簡，效果也很好，我們可以在很多大型網(wǎng)站上見到這種效果，在我的項(xiàng)目中也使用了該js。2010-04-04
因?yàn)闃I(yè)務(wù)需求 今天做了一個textarea文本域字符串長度限制的方法，其實(shí)網(wǎng)上已經(jīng)有了很多相關(guān)的解決方案，但在輸入日語時，在IE存在BUG，我的這個版本就是針對這種情況的2012-10-10
這篇文章主要介紹的是如何利用fecha進(jìn)行JS日期處理，在日常項(xiàng)目中，經(jīng)常會碰到日期處理的需求，這種需求千奇百怪，而且往往經(jīng)常變化。雖然js提供了原生的Date方法供我們選擇，但一些復(fù)雜的日期時間處理起來往往力不從心。下面通過這篇文章來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
一文帶你搞懂JS中導(dǎo)入模塊import和require的區(qū)別
JavaScript中，模塊是一種可重用的代碼塊，它將一些代碼打包成一個單獨(dú)的單元，并且可以在其他代碼中進(jìn)行導(dǎo)入和使用。JavaScript中有兩種常用的方式：使用import和require，本文主要聊聊他們二者的區(qū)別2023-03-03
layui默認(rèn)選中table的CheckBox復(fù)選框方法
今天小編就為大家分享一篇layui默認(rèn)選中table的CheckBox復(fù)選框方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
touch.js 拖動、縮放、旋轉(zhuǎn) （鼠標(biāo)手勢）功能代碼
這篇文章主要介紹了touch.js 拖動、縮放、旋轉(zhuǎn) （鼠標(biāo)手勢)功能,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
AngularJs中Bootstrap3 datetimepicker使用實(shí)例
這篇文章主要為大家詳細(xì)介紹了AngularJs中Bootstrap3 datetimepicker使用實(shí)例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
基于JavaScript實(shí)現(xiàn)TAB標(biāo)簽效果
js實(shí)現(xiàn)tab標(biāo)簽效果，在項(xiàng)目中經(jīng)常用到，今天抽點(diǎn)時間把我寫的js實(shí)現(xiàn)tab標(biāo)簽效果源碼分享給大家，對js tab標(biāo)簽代碼需要的朋友參考下2016-01-01
這篇文章主要介紹了鼠標(biāo)懸浮停留三秒后顯示大圖，在網(wǎng)頁中還是比較實(shí)用的，下面是示例代碼2014-09-09