用javascript来贯彻动画导航功用的代码,JavaScript简单落成鼠标拖动选取效能

谁在用这些导航
google是个大公司,全世界都有google的脚印,韩国的google动画效果非常不错,蓝色理想论坛里已经有人挖过来了,可惜js写的太多了,那自己写一个吧?好,就这么干!
原理
小时候,总喜欢看动画片吧,动画片是怎样实现的呢?记得妈妈说是一张画一张画切换过去(啊?那一部葫芦兄弟要画多少副画啊? -_-! ),其实我们现在做的也是这样,用一个图片,这个图片里有很多个小图,来显示动画轨迹.按时间来移动图片,那图片不是会动了啊?(不知道,表达清楚了没…语文很重要啊!!)
准备 我们需要一张图片,一个大脑,一张会笑的脸(不笑效果就出不来了….)!!下面是我准备的图片(ps水平有限^_^)…
www.bifa88.com 1
代码
我们看到上面的图片,想象下,它动起来是多么的优美啊…

复制代码 代码如下:

css

<style><!–
body{padding-top:50px;padding-left:100px;padding-right:150px;}
 
.fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px
solid #cccccc;margin-right:10px;margin-bottom:10px;}
  .seled{border:1px solid #ff0000;background-color:#D6DFF7;}
–></style>
<script type=”text/javascript”>// <![CDATA[
Array.prototype.remove = function( item ){
  for( var i = 0 ; i < this.length ; i++ ){
   if( item == this[i] )
    break;
  }
  if( i == this.length )
   return;
  for( var j = i ; j < this.length – 1 ; j++ ){
   this[ j ] = this[ j + 1 ];
  }
  this.length–;
  }

复制代码 代码如下:

String.prototype.replaceAll = function (AFindText,ARepText){ raRegExp =
new RegExp(AFindText,”g”); return this.replace(raRegExp,ARepText);}
 function getAllChildren(e) {
  return e.all ? e.all : e.getElementsByTagName(‘*’);
}

.Gnb_btn_div{ 
    width:90px; 
    height:75px; 
    overflow:hidden; 
    display:block; 
    position:absolute; 
}      

document.getElementsBySelector = function(selector) {
  if (!document.getElementsByTagName) {
    return new Array();
  }
  var tokens = selector.split(‘ ‘);
  var currentContext = new Array(document);
  for (var i = 0; i < tokens.length; i++) {
    token = tokens[i].replace(/^\s+/,”).replace(/\s+$/,”);;
    if (token.indexOf(‘#’) > -1) {
      var bits = token.split(‘#’);
      var tagName = bits[0];
      var id = bits[1];
      var element = document.getElementById(id);
      if (tagName  &&  element.nodeName.toLowerCase() != tagName) {
        return new Array();
      }
      currentContext = new Array(element);
      continue;
    }
    if (token.indexOf(‘.’) > -1) {

.Gnb_btn_img{ 
    width:100%; 
    height:525px; 
    display:block; 
    overflow:hidden; 
    text-indent:-500px; 

#gnb_btn_01 .Gnb_btn_img { 
    background-image:url() 
}

      var bits = token.split(‘.’);
      var tagName = bits[0];
      var className = bits[1];
      if (!tagName) {
        tagName = ‘*’;
      }

javascript

      var found = new Array;
      var foundCount = 0;
      for (var h = 0; h < currentContext.length; h++) {
        var elements;
        if (tagName == ‘*’) {
            elements = getAllChildren(currentContext[h]);
        } else {
            elements =
currentContext[h].getElementsByTagName(tagName);
        }
        for (var j = 0; j < elements.length; j++) {
          found[foundCount++] = elements[j];
        }
      }
      currentContext = new Array;
      var currentContextIndex = 0;
      for (var k = 0; k < found.length; k++) {
        if (found[k].className  &&  found[k].className.match(new
RegExp(‘\\b’+className+’\\b’))) {
          currentContext[currentContextIndex++] = found[k];
        }
      }
      continue;
    }
    if
(token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?”?([^\]”]*)”?\]$/))
{
      var tagName = RegExp.$1;
      var attrName = RegExp.$2;
      var attrOperator = RegExp.$3;
      var attrValue = RegExp.$4;
      if (!tagName) {
        tagName = ‘*’;
      }
      var found = new Array;
      var foundCount = 0;
      for (var h = 0; h < currentContext.length; h++) {
        var elements;
        if (tagName == ‘*’) {
            elements = getAllChildren(currentContext[h]);
        } else {
            elements =
currentContext[h].getElementsByTagName(tagName);
        }
        for (var j = 0; j < elements.length; j++) {
          found[foundCount++] = elements[j];
        }
      }
      currentContext = new Array;
      var currentContextIndex = 0;
      var checkFunction;
      switch (attrOperator) {
        case ‘=’:
          checkFunction = function(e) { return (e.getAttribute(attrName)
== attrValue); };
          break;
        case ‘~’:
          checkFunction = function(e) { return
(e.getAttribute(attrName).match(new RegExp(‘\\b’+attrValue+’\\b’)));
};
          break;
        case ‘|’:
          checkFunction = function(e) { return
(e.getAttribute(attrName).match(new RegExp(‘^’+attrValue+’-?’))); };
          break;
        case ‘^’:
          checkFunction = function(e) { return
(e.getAttribute(attrName).indexOf(attrValue) == 0); };
          break;
        case ‘$’:
          checkFunction = function(e) { return
(e.getAttribute(attrName).lastIndexOf(attrValue) ==
e.getAttribute(attrName).length – attrValue.length); };
          break;
        case ‘*’:
          checkFunction = function(e) { return
(e.getAttribute(attrName).indexOf(attrValue) > -1); };
          break;
        default :
          checkFunction = function(e) { return e.getAttribute(attrName);
};
      }
      currentContext = new Array;
      var currentContextIndex = 0;
      for (var k = 0; k < found.length; k++) {
        if (checkFunction(found[k])) {
          currentContext[currentContextIndex++] = found[k];
        }
      }
      continue;
    }
    tagName = token;
    var found = new Array;
    var foundCount = 0;
    for (var h = 0; h < currentContext.length; h++) {
      var elements =
currentContext[h].getElementsByTagName(tagName);
      for (var j = 0; j < elements.length; j++) {
        found[foundCount++] = elements[j];
      }
    }
    currentContext = found;
  }
  return currentContext;
}

复制代码 代码如下:

 function addEvent(eventType,eventFunc,eventObj){
    eventObj = eventObj || document;
    if(window.attachEvent) 
eventObj.attachEvent(“on”+eventType,eventFunc);
     if(window.addEventListener)
eventObj.addEventListener(eventType,eventFunc,false);
  }
function clearEventBubble(evt){
   evt = evt || window.event;
    if (evt.stopPropagation) evt.stopPropagation(); else
evt.cancelBubble = true;
     if (evt.preventDefault)  evt.preventDefault();  else
evt.returnValue = false;
}

<script type=”text/javascript”> 
// <![CDATA[ 
function GNB(_7c){ 
    //初始化一些参数 
    this.iImgNum=7;            //小图片个数 
    this.iImgHeight=75;        //小图片高度 
    this.iOverSpeed=50;        //鼠标经过时候切换的时间 
    this.iOutSpeed=50;        //鼠标离开时候切换的时间 
    this.eventObj=_7c;        //取得图片对象      

function posXY(event){
 event = event || window.event;
 var posX = event.pageX || (event.clientX +
         (document.documentElement.scrollLeft ||
document.body.scrollLeft));
 var posY = event.pageY || (event.clientY +
         (document.documentElement.scrollTop ||
document.body.scrollTop));
 return {x:posX, y:posY};
}

    this.MouseOverFlag=false; 
    this.imageIndex=0; 
    if(this.eventObj==null){return;} 
    this.eventObj.parentClass=this;this.eventAssign(); 
}      

 var _selectedRegions = [];
 function RegionSelect(selRegionProp){
   this.regions =[];
   var _regions =
document.getElementsBySelector(selRegionProp[“region”]);
   if(_regions  &&  _regions.length > 0){
    var _self = this;
     for(var i=0; i< _regions.length;i++){
       _regions[i].onmousedown = function(){
         var evt = window.event || arguments[0];
         if(!evt.shiftKey  &&  !evt.ctrlKey){
          // 清空所有select样式
          _self.clearSelections(_regions);
          this.className += ” “+_self.selectedClass;
          // 清空selected数组,并加入当前select中的元素
          _selectedRegions = [];
          _selectedRegions.push(this);
         }else{
          if(this.className.indexOf(_self.selectedClass) == -1){
            this.className += ” “+_self.selectedClass;
            _selectedRegions.push(this);
          }else{
            this.className =
this.className.replaceAll(_self.selectedClass,””);
            _selectedRegions.remove(this);
          }
         }
         clearEventBubble(evt);
       }
       this.regions.push(_regions[i]);
     }
   }
   this.selectedClass = selRegionProp[“selectedClass”];
   this.selectedRegion = [];
   this.selectDiv = null;
   this.startX = null;
   this.startY = null;
 }

GNB.prototype.eventAssign=function(){//注册事件 
    this.eventObj.onmouseover=this.menuMouseOver; 
    this.eventObj.onmouseout=this.menuMouseOut; 
};      

 RegionSelect.prototype.select = function(){
  var _self = this;
  addEvent(“mousedown”,function(){
    var evt = window.event || arguments[0];
    _self.onBeforeSelect(evt);
    clearEventBubble(evt);
  },document);

GNB.prototype.menuMouseOver=function(){//鼠标经过 
    if(this.parentClass.MouseOverFlag!=false){return;} 
    this.parentClass.MouseOverFlag=true; 
    this.parentClass.clearTimeOut(); 
    this.parentClass.menuMouseOverTimer(); 
};      

  addEvent(“mousemove”,function(){
    var evt = window.event || arguments[0];
    _self.onSelect(evt);
    clearEventBubble(evt);
  },document);

GNB.prototype.menuMouseOut=function(){//鼠标离开 
    this.parentClass.MouseOverFlag=false; 
    this.parentClass.clearTimeOut(); 
    this.parentClass.menuMouseOutTimer(); 
};      

  addEvent(“mouseup”,function(){
    _self.onEnd();
  },document);
 }

GNB.prototype.menuMouseOverTimer=function(){//经过图片位置递增 
    var _7d=this; 
    if(this.imageIndex>=this.iImgNum){return;} 
    this.eventObj.scrollTop=this.imageIndex*this.iImgHeight; 
    this.imageIndex++; 
    this.setTimerID=setTimeout(function(){_7d.menuMouseOverTimer();},this.iOverSpeed); 
};      

 RegionSelect.prototype.onBeforeSelect = function(evt){
  if(!document.getElementById(“selContainer”)){
     this.selectDiv = document.createElement(“div”);
     this.selectDiv.style.cssText =
“position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px
dashed
#0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;”;
     this.selectDiv.id = “selContainer”;
     document.body.appendChild(this.selectDiv);
   }else{
     this.selectDiv = document.getElementById(“selContainer”);
   }

GNB.prototype.menuMouseOutTimer=function(){////经过图片位置递减 
www.bifa88.com,    var _7e=this;if(this.imageIndex<0){return;} 
    this.eventObj.scrollTop=this.imageIndex*this.iImgHeight; 
    this.imageIndex–; 
    this.setTimerID=setTimeout(function(){_7e.menuMouseOutTimer();},this.iOutSpeed); 
};      

   this.startX = posXY(evt).x;
   this.startY = posXY(evt).y;
   this.isSelect = true;

GNB.prototype.clearTimeOut=function(){//取消定时 
    clearTimeout(this.setTimerID); 
}; 
// ]]> 
</script>

 }

xhtml

 RegionSelect.prototype.onSelect = function(evt){
    var _self = this;
    if(_self.isSelect){
      if(_self.selectDiv.style.display == “none”)
_self.selectDiv.style.display = “”;

复制代码 代码如下:

      var posX = posXY(evt).x;
      var poxY = posXY(evt).y;

<div class=”Gnb_btn_div” id=”gnb_btn_01″> 
<a class=”Gnb_btn_img” href=”#1″ href=”#1″>找朋友</a> 
</div>      

      _self.selectDiv.style.left   = Math.min(posX, this.startX);
     _self.selectDiv.style.top    = Math.min(poxY, this.startY);
     _self.selectDiv.style.width  = Math.abs(posX – this.startX);
     _self.selectDiv.style.height = Math.abs(poxY – this.startY); 

<script type=”text/javascript”> 
// <![CDATA[ 
var GNB1=new GNB(document.getElementById(“gnb_btn_01”));//实例单个按钮,当然也可以多个 
// ]]> 
</script>

     var regionList = _self.regions;
     for(var i=0; i< regionList.length; i++){
       var r = regionList[i], sr =
_self.innerRegion(_self.selectDiv,r);
       if(sr  &&  r.className.indexOf(_self.selectedClass) == -1){
          r.className = r.className + ” “+_self.selectedClass;
          _selectedRegions.push(r);
       }else if(!sr  &&  r.className.indexOf(_self.selectedClass) !=
-1){
          r.className =
r.className.replaceAll(_self.selectedClass,””);
         _selectedRegions.remove(r);
        }

演示地址

     }
   }
 }

您可能感兴趣的文章:

  • javascript
    树形导航菜单实例代码
  • JavaScript
    NodeTree导航栏(菜单项JSON类型/自制)
  • javascript实现的鼠标悬停时动态翻滚的导航条
  • javascript实现的又一个不错的滑动导航效果
  • js实现多选项切换导航菜单的方法
  • 一个js控制的导航菜单实例代码
  • js左侧三级菜单导航实例代码
  • JavaScript实现简单的二级导航菜单实例

 RegionSelect.prototype.onEnd = function(){
  if(this.selectDiv){
    this.selectDiv.style.display = “none”;
  }
  this.isSelect = false;
  //_selectedRegions = this.selectedRegion;
 }

 // 判断一个区域是否在选择区内
 RegionSelect.prototype.innerRegion = function(selDiv, region){
   var s_top = parseInt(selDiv.style.top);
   var s_left = parseInt(selDiv.style.left);
   var s_right = s_left + parseInt(selDiv.offsetWidth);
   var s_bottom = s_top + parseInt(selDiv.offsetHeight);

   var r_top = parseInt(region.offsetTop);
   var r_left = parseInt(region.offsetLeft);
   var r_right = r_left + parseInt(region.offsetWidth);
   var r_bottom = r_top + parseInt(region.offsetHeight);

    var t = Math.max(s_top, r_top);
     var r = Math.min(s_right, r_right);
     var b = Math.min(s_bottom, r_bottom);
     var l = Math.max(s_left, r_left);

      if (b > t+5  &&  r > l+5) {
          return region;
      } else {
          return null;
      }

 }

 RegionSelect.prototype.clearSelections = function(regions){
  for(var i=0; i<regions.length;i++){
   regions[i].className =
regions[i].className.replaceAll(this.selectedClass,””);
  }
 }

 function getSelectedRegions(){
  return  _selectedRegions;
 }

 function showSelDiv(){
   var selInfo = “”;
   var arr = getSelectedRegions();
   for(var i=0; i<arr.length;i++){
       selInfo += arr[i].innerHTML+”\n”;
   }

   alert(“共选择 “+arr.length+” 个文件,分别是:\n”+selInfo);

 }
// ]]></script>
<p><button
onclick=”showSelDiv();”>getRegions</button></p>
<div class=”fileDiv”>file1</div>
<div class=”fileDiv”>file2</div>
<div class=”fileDiv”>file3</div>
<div class=”fileDiv”>file4</div>
<div class=”fileDiv”>file5</div>
<div class=”fileDiv”>file6</div>
<div class=”fileDiv”>file7</div>
<div class=”fileDiv”>file8</div>
<div style=”float: left; width: 100%;”><button
onclick=”showSelDiv();”>getRegions</button></div>
<script type=”text/javascript”>// <![CDATA[
new RegionSelect({
     region:’div.fileDiv’,
     selectedClass: ‘seled’
    }).select();
// ]]></script>

您可能感兴趣的文章:

  • js实现可拖动DIV的方法
  • javascript
    事件处理、鼠标拖动效果实现方法详解
  • javascript div
    弹出可拖动窗口
  • JS高级拖动技术
    setCapture,releaseCapture
  • html+javascript实现可拖动可提交的弹出层对话框效果
  • javascript之可拖动的iframe效果代码
  • JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
  • js通过八个点
    拖动改变div大小的实现方法
  • angularjs创建弹出框实现拖动效果
  • js 可拖动列表实现代码
  • Javascript实现的类似Google的Div拖动效果代码
  • 纯js实现的积木(div层)拖动功能示例