JavaScriptインターフェースのデモの迅速なソート
6766 ワード
どんな言葉を使っても、思想は同じです.
これをするには、まず、迅速に並べ替えられます.ここでは説明しません.ページの効果を引き出すだけです.
注意: 一つのdivを配列に入れると、divが位置を交換する時、配列の処理に注意して、左か右のleft値を保存しながら、次のwhileのleft位置を指定します.
html
これをするには、まず、迅速に並べ替えられます.ここでは説明しません.ページの効果を引き出すだけです.
注意: 一つのdivを配列に入れると、divが位置を交換する時、配列の処理に注意して、左か右のleft値を保存しながら、次のwhileのleft位置を指定します.
html
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"/>
<script src="js/sort.js" type="text/javascript" charset="utf-8"/>
<div class="divMain right" id="right">
<div class="buttonDiv" id="buttonDiv">
<button class="button"><span> </span></button>
</div>
<div class="buttonDiv" id="buttonDiv2" style="display: none;">
<button class="button" id="start"><span> </span></button>
</div>
</div>
</code></pre>
<span style="color:#ff0000;"><br/> </span>
<pre><code> <script type="text/javascript">
var arr = [];
arr.push(14);
arr.push(21);
arr.push(5);
arr.push(67);
arr.push(100);
arr.push(63);
arr.push(1);
arr.push(8);
arr.push(45);
arr.push(43);
arr.push(32);
arr.push(29);
arr.push(12);
arr.push(3);
arr.push(66);
arr.push(41);
arr.push(5);
arr.push(1);
arr.push(67);
arr.push(99);
console.log(arr.join(","))
quickSort(arr, 0, arr.length-1);
console.log(arr.join(","))
function quickSort(arr, start, end) {
if(start >= end)
return false;
var i = start,
j = end;
var temp = arr[i];
while(i < j) {
while(i < j && arr[j] > temp) j = j - 1;
if(i < j)
arr[i++] = arr[j];
while(i < j && arr[i] < temp) i = i + 1;
if(i < j)
arr[j--] = arr[i];
}
arr[i] = temp;
console.log('exec quickSort start:'+start+ ' middle:'+ i +' end:'+end);
quickSort(arr, start, i-1);
quickSort(arr, i+1, end);
}
</script></code></pre>
<p><br/></p> js
<pre><code>var frame = {};
var divFrame = {};
$(function() {
/* div*/
divFrame._width = "5";
divFrame.width = "5px";
/* */
frame.obj = $("#right");
frame.width = $("#right").width();
frame.height = $("#right").height();
frame.divNumber = parseInt(frame.width / divFrame._width);
});
var content={};
function startInitDiv() {
$("#buttonDiv").hide();
var divArr = [];
var spanArr = [];
var num = frame.divNumber;
initDiv(0,num,divArr,spanArr);
}
/* div */
function initDiv(i, num, divArr,spanArr) {
if(i >= num) {
$("#buttonDiv2").show();
content.divs=divArr;
content.spans=spanArr;
content.length = divArr.length;
return null;
}
var div = document.createElement("div");
$(div).attr("class","newDiv");
$(div).attr("id","div"+i);
$(div).css("width",divFrame.width);
$(div).css("height",getRandomHeight(frame.height, 1) + "px");
$(div).css("left", i * divFrame._width + "px");
frame.obj.append(div);
divArr.push(div);
setTimeout(function(){
initDiv(i+1, num, divArr,spanArr);
}, 1);
}
function startQuickSort() {
quickSort(content, 0, content.length-1);
}
function quickSort(cont, start, end) {
if(start >= end) {
$("#start").html(" ");
return false;
}
var i = start,
j = end;
var divs = cont.divs,
spans = cont.spans;
var temp = divs[i];
$(temp).css("opacity","0.1");
$(temp).css("filter","Alpha(opacity=10)");
divs[i] = $(divs[i]).position().left+"px";
A(cont, i, j, temp, start, end);
}
function rightToLeft(cont, i, j, temp, start, end) {
/* */
var divs = cont.divs;
if(i < j && $(divs[j]).height() > $(temp).height()) {
setTimeout(function(){
j = j - 1;
rightToLeft(cont, i, j, temp, start, end);
}, 10);
} else {
if(i < j) {
var l = $(divs[j]).position().left+"px";
$(divs[j]).css("left", divs[i]);
divs[i] = divs[j];
divs[j] = l;
i = i + 1;
}
leftToRight(cont, i, j, temp, start, end);
}
}
/* */
function leftToRight(cont, i, j, temp, start, end) {
/* */
var divs = cont.divs;
if(i < j && $(divs[i]).height() < $(temp).height()) {
setTimeout(function(){
i = i + 1;
leftToRight(cont, i, j, temp, start, end);
}, 10);
} else {
if(i < j) {
var r = $(divs[i]).position().left+"px";
$(divs[i]).css("left", divs[j]);
divs[j] = divs[i];
divs[i] = r;
j = j - 1;
}
A(cont, i, j, temp, start, end);
}
}
function A (cont, i, j, temp, start, end) {
var divs = cont.divs;
if(i < j) {
setTimeout(function() {
rightToLeft(cont, i, j, temp, start, end);
}, 10);
} else {
/* */
$(temp).css("opacity","1");
$(temp).css("filter","Alpha(opacity=100)");
$(temp).css("left", divs[i]);
divs[i] = temp;
quickSort(cont, start, i-1);
quickSort(cont, i+1, end);
}
}
</code></pre>
<pre><code>.right {
position: relative;
width: 100%;
}
.divMain {
height: 700px;
background-color: #666666;
border-radius: 5px;
box-shadow: 10px 10px 20px 10px;
display: inline-block;
}
.button {
display: inline-block;
border-radius: 5px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
width: 100px;
height: 40px;
transition: 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.button:active {
background-color: #4CAF50;
border: 2px solid #e7e7e7;
transition: 0.1s;
}
.buttonDiv {
position: absolute;
margin-left: 45%;
margin-top: 600px
}
#buttonDiv2 {
position: absolute;
z-index: 9999;
margin-left: 45%;
margin-top: 600px
}
.newDiv{
position: absolute;
border: solid 1px #000000;
background-color: gainsboro;
border-radius: 5px;
bottom: 0px;
}
</code></pre>
<br/>
<br/>
</div>
</div>
</div>
</div>