快速排序算法详解,jstab滑动门代码

Javascript实现快速排序(Quicksort)的算法详解,快速排序算法详解

目前,最常见的排序算法大概有七八种,其中”快速排序”(Quicksort)使用得最广泛,速度也较快。它是图灵奖得主C.
A. R. Hoare(1934–)于1960时提出来的。

“快速排序”的思想很简单,整个排序过程只需要三步

(1)在数据集之中,选择一个元素作为”基准”(pivot)。

(2)所有小于”基准”的元素,都移到”基准”的左边;所有大于”基准”的元素,都移到”基准”的右边。

(3)对”基准”左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。

举例来说,现在有一个数据集{85, 24, 63, 45, 17, 31, 96,
50},怎么对其排序呢?

第一步,选择中间的元素45作为”基准”。(基准值可以任意选择,但是选择中间的值比较容易理解。)

图片 1

第二步,按照顺序,将每个元素与”基准”进行比较,形成两个子集,一个”小于45″,另一个”大于等于45″。

图片 2

第三步,对两个子集不断重复第一步和第二步,直到所有子集只剩下一个元素为止。

图片 3

下面参照网上的资料,用Javascript语言实现上面的算法。

首先,定义一个quickSort函数,它的参数是一个数组。

var quickSort = function(arr) {
};

然后,检查数组的元素个数,如果小于等于1,就返回。

var quickSort = function(arr) {
  if (arr.length <= 1) { return arr; }
};

接着,选择”基准”(pivot),并将其与原数组分离,再定义两个空数组,用来存放一左一右的两个子集。

var quickSort = function(arr) {
  if (arr.length <= 1) { return arr; }
  var pivotIndex = Math.floor(arr.length / 2) ;
  var pivot = arr.splice(pivotIndex, 1)[0];
  var left = [];
  var right = [];
};

然后,开始遍历数组,小于”基准”的元素放入左边的子集,大于基准的元素放入右边的子集。

var quickSort = function(arr) {
  if (arr.length <= 1) { return arr; }
  var pivotIndex = Math.floor(arr.length / 2) ;
  var pivot = arr.splice(pivotIndex, 1)[0];
  var left = [];
  var right = [];
  for (var i = 0; i < arr.length; i++){
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
};

最后,使用递归不断重复这个过程,就可以得到排序后的数组。

var quickSort = function(arr) {
  if (arr.length <= 1) { return arr; }
  var pivotIndex = Math.floor(arr.length / 2);
  var pivot = arr.splice(pivotIndex, 1);
  var left = [];
  var right = [];
  for (var i = 0; i < arr.length; i++){
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  return quickSort(left).concat(pivot, quickSort(right));
};

var dataArray = [85,24,63,45,17,31,96,50];
console.log(dataArray.join(","));
console.log(quickSort(dataArray).join(","));

希望本文所述对大家的javascript程序设计有所帮助。

目前,最常见的排序算法大概有七八种,其中”快速排序”(Quicksort)使用得…

js实现简洁的TAB滑动门效果代码,jstab滑动门代码

本文实例讲述了js实现简洁的TAB滑动门效果代码。分享给大家供大家参考。具体如下:

这是一款滑动门代码,简洁TAB,简单的鼠标导航效果,大家或许经常见到的效果啦,鼠标放在主菜单上,下边框架内的内容会跟着变换,鼠标不需要点击,只需要滑上去就可切换内容,像一扇门,所以有时候别人叫“滑动门”菜单。

运行效果如下图所示:

图片 4

在线演示地址如下:

具体代码如下:

<html>
<head>
 <title>简洁TAB</title>
 <script type="text/javascript">
 function nTabs(thisObj, Num) {
  if (thisObj.className == "active") return;
  var tabObj = thisObj.parentNode.id;//赋值指定节点的父节点的id名字
  var tabList = document.getElementById(tabObj).getElementsByTagName("li");
  for (i = 0; i < tabList.length; i++) {//点击之后,其他tab变成灰色,内容隐藏,只有点击的tab和内容有属性
  if (i == Num) {
   thisObj.className = "active";
   document.getElementById(tabObj + "_Content" + i).style.display = "block";
  } else {
   tabList[i].className = "normal";
   document.getElementById(tabObj + "_Content" + i).style.display = "none";
  }
  }
 }
 </script>
 <style type="text/css">
 *
 {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
 }
 .nTab
 {
  width: 500px;
  height:200px;
  margin: 20px auto;
  border: 1px solid #333;
  overflow: hidden;
 }
 .none
 {
  display: none;
 }
 .nTab .TabTitle li
 {
  float: left;
  cursor: pointer;
  height: 35px;
  line-height: 35px;
  font-weight: bold;
  text-align: center;
  width: 124px;
 }
 .nTab .TabTitle li a
 {
  text-decoration: none;
 }
 .nTab .TabTitle .active
 {
  background-color:blue;
  color: #336699;
 }
 .nTab .TabTitle .normal
 {
  color: #F1AC1C;
 }
 .nTab .TabContent
 {
  clear: both;
  overflow: hidden;
  background: #fff;
  padding: 5px;
  display: block;
  height:100px;
 }
 </style>
</head>
<body>
 <div class="nTab">
 <div class="TabTitle">
  <ul id="myTab">
  <li class="active" onmouseover="nTabs(this,0);">ASP</li>
  <li class="normal" onmouseover="nTabs(this,1);">PHP2</li>
  <li class="normal" onmouseover="nTabs(this,2);">PHP3</li>
  <li class="normal" onmouseover="nTabs(this,3);">PHP4</li>
  </ul>
 </div>
 <div class="TabContent" >
  <div id="myTab_Content0">
  第一块内容</div>
  <div id="myTab_Content1" class="none">
  第二块内容</div>
  <div id="myTab_Content2" class="none">
  第三块内容</div>
  <div id="myTab_Content3" class="none">
  第四块内容</div>
 </div>
 </div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

本文实例讲述了js实现简洁的TAB滑动门效果代码。分享给大家供大家参考。具体如下:
这…

jquery动态导航插件dynamicNav用法实例分析,

本文实例讲述了jquery动态导航插件dynamicNav用法。分享给大家供大家参考。具体如下:

这是一款自己写的jquery动态导航插件—dynamicNav,具体思路是:

第一、给所有的li里插入一个span标签,且包含li里面的a标签
第二、复制一份a标签,插入到span里,现在span里有两个a标签
第三、根据传入的参数判断是垂直切换还是水平的,如果是垂直的,将span的宽度改为一个a标签的宽度,这时两个a标签就垂直排列了,这里一定要将li的overflow:hidden;否则会看到2个a标签。如果是水平的,将span的宽度改为2个a标签的宽度,且将li的宽度改为一个a标签的宽度,因为我没有在css中设置li的宽度,它是随a标签的宽度而改变,如果你像将所有导航菜单的宽度设为一样宽,可以在css中给li加上width属性。
第四、就是开始制作动画效果,使用hover事件,处理鼠标经过和离开时的效果。

使用jquery的animate改变span的margin-top(垂直方向)和margin-left(水平方向)就可以了。

运行效果截图如下:

图片 5

在线演示地址如下:

具体代码如下:

<!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>动态导航插件</title>
<style type="text/css">
<!--
body, td, th {
 font-size: 14px;
 background-color:#FFF
}
h1{border-bottom:1px solid #999; margin:50px 60px;}
/*导航默认样式,可根据实际情况修改*/
* {
 margin:0;
 padding:0
}
.nav {
 width:980px;
 height:30px;
 left:50%;
 margin-left:-490px;
 list-style:none;
 position:relative;
}
.nav li {
 display:inline-block;
 margin:0 3px;
 position:relative;
 overflow:hidden;
 height:30px; /*建议此高度大于等于里面的a标签高度*/
 float:left;
}
.nav li span {
 display:inline-block;
 overflow:hidden
}
.nav li a {
 text-decoration:none;
 outline:none;
 color:#666;
 display:inline-block;
 padding:0 10px; 
 text-align:center;
 background-color: #E1E1E1;
 font-weight:bold;
 height:30px;
 line-height:30px;
}
/*鼠标经过时样式*/
.nav li a.over {
 background-color:#666;
 color:#FFF
}
-->
</style>
<script type=text/javascript src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($){
  $.fn.dynamicNav=function(options){
  //默认配置
   var defaults = {
   direction:"up", //动画切换方向,总共4种up 、down 、left 、right
   duration:100 //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
   }; 
 // 覆盖默认配置
  var opts = $.extend(defaults, options);
  this.each(function(){
   var navList=$(this).find("li"),
   navLink=navList.find("a");
   //在a标签外侧插入span
   navList.wrapInner("");
   var span=navLink.parent();
   //判断是否垂直切换
   if(opts.direction=="up" || opts.direction=="down"){
    var v=true;
     }
   //判断是否改变span初始位置及a样式 
   if(opts.direction=="right" || opts.direction=="down"){
    var restSpan=true;
     }
    navLink.each(function(){
    //获取a高度和宽度
    var w=$(this).outerWidth(),
    p=$(this).parent();
    //初始复制现有a标签 
    $(this).clone().appendTo(p).addClass("over");
    //如果是垂直切换
    if(v){ 
     p.css("width",w);   
     }else{
     p.css("width",2*w).parent().css("width",w); 
     }
     });
   //如果向右或向下切换,改变span初始位置及a样式
   if(restSpan){
   span.each(function(){
     if(opts.direction=="right"){
     $(this).css({"margin-left":-$(this).outerWidth()/2});
     }
    if(opts.direction=="down"){
     $(this).css({"margin-top" : -$(this).outerHeight()/2});
     }
    $(this)
    .find('a')
    .last()
    .removeClass("over")
    .prev()
    .addClass("over");
    });
     }
   //鼠标经过时动画函数
   function over(o){
    o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration);
     }
   //鼠标移开时动画函数
   function out(o){
    o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.duration);
     }
   //鼠标经过和离开 
   span.hover(function(){
     restSpan ? out($(this)) : over($(this));
      },function(){
      restSpan ? over($(this)) : out($(this));
      });
   });
  };
 })(jQuery);
 $(function(){
  //向左 
  $("#nav1").dynamicNav({
    direction:"left", //动画切换方向,总共4种up 、down 、left 、right
    duration:300 //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
    });
  //向右 
  $("#nav2").dynamicNav({
    direction:"right", 
    duration:200 
    });
  //向上
  $("#nav3").dynamicNav({
    direction:"up", 
    duration:100 
    });
  //向下 
  $("#nav4").dynamicNav({
    direction:"down",
    duration:400
    });
  });
</script>
</head>
<body>
<h1>向左(速度300毫秒)</h1>
<ul class="nav" id="nav1">
 <li><a href="#">首页</a></li>
 <li><a href="#">前端技术</a></li>
 <li><a href="#">视觉设计</a></li>
 <li><a href="#">文章归档</a></li>
 <li><a href="#">工具/书籍</a></li>
 <li><a href="#">关于我</a></li>
</ul>
<h1>向右(速度200毫秒)</h1>
<ul class="nav" id="nav2">
 <li><a href="#">首页</a></li>
 <li><a href="#">前端技术</a></li>
 <li><a href="#">视觉设计</a></li>
 <li><a href="#">文章归档</a></li>
 <li><a href="#">工具/书籍</a></li>
 <li><a href="#">关于我</a></li>
</ul>
<h1>向上(速度100毫秒)</h1>
<ul class="nav" id="nav3">
 <li><a href="#">首页</a></li>
 <li><a href="#">前端技术</a></li>
 <li><a href="#">视觉设计</a></li>
 <li><a href="#">文章归档</a></li>
 <li><a href="#">工具/书籍</a></li>
 <li><a href="#">关于我</a></li>
</ul>
<h1>向下(速度400毫秒)</h1>
<ul class="nav" id="nav4">
 <li><a href="#">首页</a></li>
 <li><a href="#">前端技术</a></li>
 <li><a href="#">视觉设计</a></li>
 <li><a href="#">文章归档</a></li>
 <li><a href="#">工具/书籍</a></li>
 <li><a href="#">关于我</a></li>
</ul>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

本文实例讲述了jquery动态导航插件dynamicNav用法。分享给大家供大家参考。具体如下:
这是一款自…

发表评论

电子邮件地址不会被公开。 必填项已用*标注