快捷導(dǎo)航

javascript九宮格圖片隨機(jī)打亂位置的實(shí)現(xiàn)方法

更新時(shí)間：2017年03月15日 09:11:58 作者：川信_(tái)周靜

這篇文章主要為大家詳細(xì)介紹了javascript九宮格圖片隨機(jī)打亂位置的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天就做個(gè)九宮格的簡(jiǎn)易拼圖，最讓我頭疼的就是點(diǎn)擊開(kāi)始打亂圖片位置。一開(kāi)始在百度查看相關(guān)博客，走了很多彎路。最后看了眾多的例子，自己寫了個(gè)方法。

<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'); //動(dòng)態(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ù)組保存圖片的代號(hào)
    var j = Math.round(Math.random()*8);　　//通過(guò)隨機(jī)數(shù)j產(chǎn)生隨機(jī)圖片代號(hào)p[j]
    for ( var u=0 ; u < x.length ; u++ ) //遍歷x[]數(shù)組防止后面出現(xiàn)與前面一樣的圖片代號(hào)
   　　{ 
    　　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)的圖片號(hào)數(shù)進(jìn)入x[]數(shù)組
   }
  dragdrop();//拖動(dòng)圖片方法
  }
</script>

點(diǎn)擊開(kāi)始可以達(dá)到隨機(jī)打亂圖片位置的效果，如下

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)W習(xí)筆記之函數(shù)定義、頁(yè)面渲染圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之函數(shù)定義、頁(yè)面渲染,結(jié)合實(shí)例形式較為詳細(xì)的分析了微信小程序中函數(shù)的定義、生命周期、模板調(diào)用、樣式控制等操作技巧,并配合圖文形式進(jìn)行了詳細(xì)說(shuō)明,需要的朋友可以參考下
2019-03-03
百度Popup.js彈出框進(jìn)化版拖拽小框架發(fā)布兼容IE6/7/8,Firefox,Chrome
百度空間的彈出窗口和拖拽效果(也就是popup.js),代碼精簡(jiǎn)，效果也很好，我們可以在很多大型網(wǎng)站上見(jiàn)到這種效果，在我的項(xiàng)目中也使用了該js。
2010-04-04
JS TextArea字符串長(zhǎng)度限制代碼集合
因?yàn)闃I(yè)務(wù)需求今天做了一個(gè)textarea文本域字符串長(zhǎng)度限制的方法，其實(shí)網(wǎng)上已經(jīng)有了很多相關(guān)的解決方案，但在輸入日語(yǔ)時(shí)，在IE存在BUG，我的這個(gè)版本就是針對(duì)這種情況的
2012-10-10
利用fecha進(jìn)行JS日期處理
這篇文章主要介紹的是如何利用fecha進(jìn)行JS日期處理，在日常項(xiàng)目中，經(jīng)常會(huì)碰到日期處理的需求，這種需求千奇百怪，而且往往經(jīng)常變化。雖然js提供了原生的Date方法供我們選擇，但一些復(fù)雜的日期時(shí)間處理起來(lái)往往力不從心。下面通過(guò)這篇文章來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2016-11-11
一文帶你搞懂JS中導(dǎo)入模塊import和require的區(qū)別
JavaScript中，模塊是一種可重用的代碼塊，它將一些代碼打包成一個(gè)單獨(dú)的單元，并且可以在其他代碼中進(jìn)行導(dǎo)入和使用。JavaScript中有兩種常用的方式：使用import和require，本文主要聊聊他們二者的區(qū)別
2023-03-03
layui默認(rèn)選中table的CheckBox復(fù)選框方法
今天小編就為大家分享一篇layui默認(rèn)選中table的CheckBox復(fù)選框方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
touch.js 拖動(dòng)、縮放、旋轉(zhuǎn) （鼠標(biāo)手勢(shì)）功能代碼
這篇文章主要介紹了touch.js 拖動(dòng)、縮放、旋轉(zhuǎn) （鼠標(biāo)手勢(shì))功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-02-02
AngularJs中Bootstrap3 datetimepicker使用實(shí)例
這篇文章主要為大家詳細(xì)介紹了AngularJs中Bootstrap3 datetimepicker使用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
基于JavaScript實(shí)現(xiàn)TAB標(biāo)簽效果
js實(shí)現(xiàn)tab標(biāo)簽效果，在項(xiàng)目中經(jīng)常用到，今天抽點(diǎn)時(shí)間把我寫的js實(shí)現(xiàn)tab標(biāo)簽效果源碼分享給大家，對(duì)js tab標(biāo)簽代碼需要的朋友參考下
2016-01-01
鼠標(biāo)懸浮停留三秒后自動(dòng)顯示大圖js代碼
這篇文章主要介紹了鼠標(biāo)懸浮停留三秒后顯示大圖，在網(wǎng)頁(yè)中還是比較實(shí)用的，下面是示例代碼
2014-09-09