导航栏4种效果---原生js

时间：2022-09-01 17:01:57
 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 *{margin:;padding:; 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 #; position:relative; z-index:; height:40px;}

 #box li{z-index:; height:;}

 .ha{border-left:2px solid #;}

 .he{border-right:2px solid #;}

 </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=;i<aLi.length;i++){

             (function(index){

                 aLi[i].onmouseover=function(){

                     aLi1[index].style.background='rgb('+rnd(,)+','+rnd(,)+','+rnd(,)+')';

                     move(aLi1[index],{height:});

                 };

             })(i);

             (function(index){

                 aLi[i].onmouseout=function(){

                     move(aLi1[index],{height:});

                 };

             })(i);

         }

     };

 </script>

 </head>

 <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>

<!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>

<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>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            overflow: hidden;
            border: 1px solid #ccc;
            width: 300px;
            height: 30px;
            background: #0066FF;
            position: absolute;
        }

        div a {
            width: 40px;
            height: 30px;
            margin-right: 10px;
            line-height: 30px;
            text-align: center;
            float: left;
            text-decoration: none;
            color: #000;
        }

        #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>

</div>
</body>
</html>

<!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>

<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&plus;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. iOS 滑动隐藏导航栏-三种方式

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

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

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

  5. 圆盘时钟效果 原生JS

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

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

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

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

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

  8. 五星评分效果 原生js

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

  9. 导航栏全透明效果&comma; 只保留左右两个按钮&comma; 如何实现&quest;以及关于NavigationController的小问题

    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageWithColor:[UIColor clearCo ...

随机推荐

  1. 如何使用花生壳 发布WCF服务 进行外网访问

    当我们发布WCF服务的时候,可以直接通过服务器的域名或者IP进行. 但是如果仅仅是通过花生壳进行域名解析,需要我们自己在设置的时候注意以下几点, 直接用图说明问题 1.首先配置花生壳,在红色处填写一个 ...

  2. UIView中间透明周围半透明&lpar;四种方法&rpar;

    方法一 #import "DrawView.h" @implementation DrawView - (instancetype)initWithFrame:(CGRect)fr ...

  3. 有关Spring Batch

    在使用Spring Batch时,在无法实现StepListener的情况下,如何使用ExecutionContext呢. 解决办法,使用宣言@BeforeStep或@AfterStep.

  4. php环境安装及搭建

    最近由于项目需要 转战 PHP .  在做了差不多两年java后 说实话看php代码还是有些难受的. 毕竟不习惯.废话不说 先说一下 PHP环境的部署等等,也就是最近几天学习的心得吧.方便以后参考. ...

  5. 【Demo 0003】Java基础-数组

    本章学习要点:       1.  了解数组的基本概念:       2.  掌握数组使用方法:  一.数组的基本概念     1.  数组定义:              同一数据类型数据的集合,在 ...

  6. 黄文俊：Serverless小程序后端技术分享

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 黄文俊,现任腾讯云SCF无服务器云函数高级产品经理,多年企业级系统开发和架构工作经验,对企业级存储.容器平台.微服务架构.无服务器计算等领域 ...

  7. 2&rpar;django-请求生命周期

    1)下图是django请求生命周期 2)详细例子

  8. 7&period;26-Codeforces Round &num;372 &lpar;Div&period; 2&rpar;

    C. Plus and Square Root 链接:codeforces.com/group/1EzrFFyOc0/contest/716/problem/C 题型:构造 题意:起始数 x 为 2, ...

  9. 使用Topshelf管理Windows服务

    目的:以控制台方式开发Windows服务程序,调试部署方便. https://www.cnblogs.com/itjeff/p/8316244.html https://www.cnblogs.com ...

  10. const&lowbar;cast

    函数原型: const_cast < type-id > ( expression ) 去掉const属性:const_cast<int*> (&num),常用,因为不 ...

相关文章