1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>无标题文档</title>
  6.  <style>
  7.  *{margin:;padding:; list-style:none;}
  8.  ul{width:410px; background:#ccc; position:absolute;top:300px; left:300px;}
  9.  ul li{width:100px; line-height:40px; font-size:20px; text-align:center; float:left;border:1px solid #; position:relative; z-index:; height:40px;}
  10.  #box li{z-index:; height:;}
  11.  .ha{border-left:2px solid #;}
  12.  .he{border-right:2px solid #;}
  13.  </style>
  14.  <script src="move.js"></script>
  15.  <script>
  16.      function rnd(n,m){
  17.          return Math.floor(Math.random()*(m-n)+n);
  18.      }
  19.      window.onload=function(){
  20.          var oUl=document.getElementById('ul1');
  21.          var aLi=oUl.children;
  22.          var oBox=document.getElementById('box');
  23.          var aLi1=oBox.children;
  24.          for(var i=;i<aLi.length;i++){
  25.              (function(index){
  26.                  aLi[i].onmouseover=function(){
  27.                      aLi1[index].style.background='rgb('+rnd(,)+','+rnd(,)+','+rnd(,)+')';
  28.                      move(aLi1[index],{height:});
  29.                  };
  30.              })(i);
  31.              (function(index){
  32.                  aLi[i].onmouseout=function(){
  33.                      move(aLi1[index],{height:});
  34.                  };
  35.              })(i);
  36.          }
  37.      };
  38.  </script>
  39.  </head>
  40.  
  41.  <body>
  42.  <div>
  43.      <ul id="ul1">
  44.          <li class="ha">李少杰</li>
  45.          <li>张茜</li>
  46.          <li>大肥肥</li>
  47.          <li class="he">真噗噗</li>
  48.      </ul>
  49.     <ul id="box">
  50.          <li class="ha"></li>
  51.          <li></li>
  52.          <li></li>
  53.          <li class="he"></li>
  54.     </ul>
  55.  </div>
  56.  </body>
  57.  </html>
  58.  
  59. <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    *{margin:0;padding:0; list-style:none;}
    ul{width:410px; background:#ccc; position:absolute;top:300px; left:300px;}
    ul li{width:100px; line-height:40px; font-size:20px; text-align:center; float:left;border:1px solid #000; position:relative; z-index:3; height:40px;}
    #box{top:341px; left:300px;}
    #box li{ z-index:2; display:none;}
    .ha{border-left:2px solid #000;}
    .he{border-right:2px solid #000;}
    </style>
    <script src="move.js"></script>
    <script>
        function rnd(n,m){
            return Math.floor(Math.random()*(m-n)+n);    
        }
        window.onload=function(){
            var oUl=document.getElementById('ul1');
            var aLi=oUl.children;
            var oBox=document.getElementById('box');
            var aLi1=oBox.children;
            for(var i=0;i<aLi.length;i++){
                (function(index){
                    aLi[i].onmouseover=function(){
                        aLi1[index].style.background='rgb('+rnd(1,256)+','+rnd(1,256)+','+rnd(1,256)+')';
                        aLi1[index].style.float='none';
                        aLi1[index].style.position='absolute';
                        aLi1[index].style.display='block';
                        aLi1[index].style.top=0;
                        aLi1[index].style.left=102*index+'px';
                        move(aLi1[index],{top:-40,left:102*index,opacity:1});    
                    };    
                    aLi[i].onmouseout=function(){
                        move(aLi1[index],{top:0,left:102*index,opacity:0});    
                    };    
                })(i);    
            }
        };
    </script>
    </head>
  60.  
  61. <body>
    <div>
        <ul id="ul1">
            <li class="ha">李少杰</li>
            <li>张茜</li>
            <li>大肥肥</li>
            <li class="he">真噗噗</li>
        </ul>
        <ul id="box">
            <li class="ha"></li>
            <li></li>
            <li></li>
            <li class="he"></li>
        </ul>
    </div>
    </body>
    </html>
  62.  
  63. <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
  64.  
  65.         div {
                overflow: hidden;
                border: 1px solid #ccc;
                width: 300px;
                height: 30px;
                background: #0066FF;
                position: absolute;
            }
  66.  
  67.         div a {
                width: 40px;
                height: 30px;
                margin-right: 10px;
                line-height: 30px;
                text-align: center;
                float: left;
                text-decoration: none;
                color: #000;
            }
  68.  
  69.         #move {
                position: absolute;
                top: 0;
                left: 0;
                width: 50px;
                height: 30px;
                background: rgba(0, 0, 0, .5);
                z-index: 2;
            }
           .red{
               backrgound:red;
           }
        </style>
        <script>
            function getStyle(obj,name){
                if(obj.currentStyle){
                    return obj.currentStyle[name];//兼容ie
                }else{
                    return getComputedStyle(obj,false)[name];//除ie以外的
                }
            }
            function move1(obj,name,iTarget,time,fn){
            var start=parseFloat(getStyle(obj,name));
            var dis=iTarget-start;
            var count=parseInt(time/30);
            var step=dis/count;
            var n=0;
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                n++;
                var cur=start+n*step;
                if(name=='opacity'){
                    obj.style.opacity=cur;
                    obj.style.filter='alpha('+cur*100+')';    
                }else{
                    obj.style[name]=cur+'px';    
                }
                
                if(n==count){
                    clearInterval(obj.timer);
                    fn&&fn();    
                }    
            },30);
        }
    //end
    //多个move改变
    function move(obj,json,complete){
            clearInterval(obj.timer);
            complete=complete ||{};
            complete.time=complete.time || 3000;
            complete.easeing = complete.easeing || 'ease-in';
            var start={};
            var dis={};
            for(var name in json){
                start[name]=parseFloat(getStyle(obj,name));
                dis[name]=json[name]-start[name];
            }
            var count=parseInt(complete.time/30);
            var n=0;
            obj.timer=setInterval(function(){
                n++;
                for(var name in json){
                    switch(complete.easeing){
                        case 'linear':
                            var a=n/count;
                            var cur =start[name]+dis[name]*a;
                            break;
                        case 'ease-in':
                            var a=n/count;
                            var cur =start[name]+dis[name]*a*a*a;
                            break;
                        case 'ease-out':
                            var a=1-n/count;
                            var cur =start[name]+dis[name]*(1-a*a*a);
                            break;        
                    }
                    if(name=='opacity'){
                        obj.style.opacity=cur;
                        obj.style.filter='alpha('+cur*100+')';    
                    }else{
                        obj.style[name]=cur+'px';    
                    }
                };
                if(n==count){
                    clearInterval(obj.timer);
                    complete.fn&& complete.fn();    
                }        
                
            },30);
    }
            window.onload = function () {
                var oMove = document.getElementById('move');
                var oBox = document.getElementById('box');
                var aA = oBox.children;
                var oOff = true;
                var arr = [];
                for (var i = 0; i < aA.length; i++) {
                    arr[i] = {
                        left: aA[i].offsetLeft,
                        top: aA[i].offsetTop
                    }
                }
                //console.log(arr);
                //布局转换--float-->定位布局
                for (var i = 0; i < aA.length; i++) {
                    aA[i].style.position = 'absolute';
                    aA[i].style.left = arr[i].left + 'px';
                    aA[i].style.top = arr[i].top + 'px';
                    aA[i].style.margin = 0; 
                    aA[i].style.zIndex = 5;
                }
                for (var i = 0; i < aA.length; i++) {
                    aA[i].index = i;
                    aA[i].onmouseover = function () {
                        move(oMove, {left: aA[this.index].offsetLeft}, {time: 500});
                        this.onoff = false;
                    };
                    aA[i].onmouseout = function () {
                        if (this.onoff) {
                            move(oMove, {left: aA[this.index].offsetLeft}, {time: 500});
                        } else {
                            move(oMove, {left: 0}, {time: 500, easeing: 'ease-in'});
                        }
                    };
                    aA[i].onclick = function () {
                        this.onoff = true;
                        move(oMove, {left: aA[this.index].offsetLeft}, {time: 500})
                    }
                }
            }
        </script>
    </head>
    <body>
    <div id="box">
        <span id="move"></span>
        <a href="javascript:;" class="red">张茜</a>
        <a href="javascript:;">大飞</a>
        <a href="javascript:;">尊尊</a>
        <a href="javascript:;">赵帅</a>
        <a href="javascript:;">魁哥</a>
        <a href="javascript:;">大汉</a>
  70.  
  71. </div>
    </body>
    </html>
  72.  
  73. <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    *{margin:0;padding:0; list-style:none;}
    ul{width:408px; margin:50px auto; position:relative; background:#ccc;}
    ul li{width:100px; line-height:40px; font-size:20px; text-align:center; float:left;border:1px solid #000; position:relative; z-index:3;}
    .pro{position:absolute; top:0; left:0; background:rgba(242,245,12,1);width:100px;height:40px; z-index:1;}
    </style>
    <script>
    var speed=0;
    var timer=null;
    function move2(obj,dis){
        timer=setInterval(function(){
            if(obj.offsetLeft>dis){
                speed-=(obj.offsetLeft-dis)/5;
                speed*=0.7;    
            }else{
                speed+=(dis-obj.offsetLeft)/5;
                speed*=0.96;        
            }
            if(Math.abs(speed)<1&&obj.offsetLeft==dis){
                speed=0;
                clearInterval(timer);    
            }
            obj.style.left=obj.offsetLeft+speed+'px';    
        },30);        
    }
    window.onload=function(){
        var aLi=document.getElementsByTagName('li');
        var oZhe=document.getElementById('zhe');
        for(var i=0;i<aLi.length-1;i++){
            aLi[i].index=i;
            aLi[i].onmouseenter=function(){
                clearInterval(timer);
                move2(oZhe,aLi[0].offsetWidth*this.index);    
            };    
        }    
    };
    </script>
    </head>
  74.  
  75. <body>
    <div>
        <ul>
            <li>李少杰</li>
            <li>张茜</li>
            <li>大肥肥</li>
            <li>真噗噗</li>
            <li class="pro" id="zhe"></li>
        </ul>
    </div>
    </body>
    </html>

导航栏4种效果---原生js的更多相关文章

  1. ViewPager+GridView实现首页导航栏布局分页效果

    如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...

  2. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  3. html、css实现导航栏5种常用下拉效果

    实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...

  4. iOS 滑动隐藏导航栏-三种方式

    /** 1隐藏导航栏-简单- */    self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 ...

  5. Bootstrap，导航栏点击效果修复（补）

    前言: 昨天晚上休息,忘记发博客了.对于学习这件是,还是需要坚持的.想想自建一个Jekyll博客模版还是很兴奋的,话不多说,看正文吧! 关于开发:  先看个Demo吧,点这里.你会发现,点击是没有效果 ...

  6. 圆盘时钟效果 原生JS

    圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...

  7. vue实现实时监听文本框内容的变化（最后一种为原生js）

    一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. js滑动导航栏点击后居中效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 五星评分效果 原生js

    五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要 <!-- 评分start --> <ul> ...

随机推荐

  1. LB负载均衡集群及DR模式配置

    一.系统环境准备: 1.dir服务器 主机名称:dir 系统环境:CentOS release 6.5 (Final) 外网ip:192.168.1.203(网络模式桥接) vip:192.168.1 ...

  2. 【转】win7 uac关闭

    方法1: 原文网址:http://jingyan.baidu.com/article/c275f6bae2650ce33d756795.html 首先点击开始,并在输入框中输入“MSCONFIG”,打 ...

  3. weblogic管理2 - 创建并启动一个managed server

    创建一个managed server. 1.  进入网页console管理页面,如:http://10.100.25.14:7001/console     , 先点击->服务器 (红色标记框) ...

  4. Textarea高度随内容自适应地增长，无滚动条

    <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; char ...

  5. OkHttpUtils

    对okhttp的封装类,okhttp见:https://github.com/square/okhttp.目前对应okhttp版本3.3.1. 用法: Android Studio compile ' ...

  6. python字符串关键点总结

    python字符串关键点有下面几点: 1.一些引号分隔的字符 你可以把字符串看出是Python的一种数据类型,在Python单引号或者双引号之间的字符数组或者连续的字符集合.在python中最常用的引 ...

  7. C/C++数组名与指针的区别详解

    1.数组名不是指针我们看下面的示例: #include <iostream> int main() { ]; char *pStr = str; cout << sizeof( ...

  8. 拆分ABBYY FineReader 12文档的方法

    处理大量多页文档时,通常都会首先扫描所有文档,然后才进行分析和识别.但是,要正确保留每个纸质文档的原始格式,ABBYY FineReader 12必须将每个文档作为单独 FineReader 文档进行 ...

  9. 项目发布: error CS0103: 当前上下文中不存在名称“*****”

    项目发布,发布不出来,而且编译,发布过程中vs也不报错,也不提示错误.   在错误窗口忽闪一个错误提示之后,输出窗口有西边的提示: error CS0103: 当前上下文中不存在名称"Cur ...

  10. java_list,set,map集合

    一.集合定义 集合就是讲诺干用途相同.近似的“数据”结合成一个整体 集合从体系上分为三种 1.列表(List):List集合区分元素的顺序,允许包含相同的元素 2.集(set):Set集合不区分元素的 ...