导航栏4种效果---原生js
<!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的更多相关文章
- ViewPager+GridView实现首页导航栏布局分页效果
如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...
- Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- html、css实现导航栏5种常用下拉效果
实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...
- iOS 滑动隐藏导航栏-三种方式
/** 1隐藏导航栏-简单- */ self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 ...
- Bootstrap，导航栏点击效果修复（补）
前言: 昨天晚上休息,忘记发博客了.对于学习这件是,还是需要坚持的.想想自建一个Jekyll博客模版还是很兴奋的,话不多说,看正文吧! 关于开发: 先看个Demo吧,点这里.你会发现,点击是没有效果 ...
- 圆盘时钟效果 原生JS
圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...
- vue实现实时监听文本框内容的变化（最后一种为原生js）
一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- js滑动导航栏点击后居中效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 五星评分效果 原生js
五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要 <!-- 评分start --> <ul> ...
随机推荐
- js 如何判断页面里的某个值改变
程序未改变变量的值前新增全局变量:var oldDivValue = document.getElementById("divid").innerHTML; 程序在改变变量值后执行 ...
- uva562 Dividing coins 01背包
link:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- resin的基本操作
1.什么是resin? resin是CAUCHO公司的产品,是一个非常流行的支持servlets和jsp的引擎,速度非常快.Resin本身包含了一个支持HTTP/1.1的WEB服务器.虽然它可 ...
- 骑士问题(knight) (BFS)
题目描述 在一个标准8×8的国际象棋棋盘上,棋盘中有些格子可能是有障碍物的.已知骑士的初始位置和目标位置,你的任务是计算出骑士最少需要多少步可以从初始位置到达目标位置.有障碍物的格子当然不可以到达. ...
- iOS 9.0中UIAlertController的用法
UIAlertView和UIActionSheet 被划线了. 苹果不推荐我们使用这两个类了.也不再进行维护和更新 正如苹果所说它现在让我们用UIAlertConntroller 并设置样式为UIAl ...
- Linux系统编程@终端IO
Linux系统中终端设备种类 终端是一种字符型设备,有多种类型,通常使用tty 来简称各种类型的终端设备.终端特殊设备文件一般有以下几种: 串行端口终端(/dev/ttySn ) ,伪终端(/dev ...
- c++文件操作相关
file operation API functions HANDLE CreateFile(lpFileName,dwDesiredAccess,dwShareMode,lpSecurityAttr ...
- mysql 1449 ： The user specified as a definer ('root'@'%') does not exist ,mysql 赋给用户权限 grant all privileges on
mysql 1449 : The user specified as a definer ('root'@'%') does not exist 解决方法 遇到了 SQLException: acce ...
- python_Day3[set集合，函数，全局变量之篇]
一.set集合 1.Set集合特点:无序.不重复,可嵌套 2.set集合创建规则:set = {"123","234"} 字典创建规则:dic = {“Key” ...
- Java 实现学生信息管理系统
编写一个简单的学生管理信息系统. 在oracle中设计一张学生表,以学号作为关键字. 其他学生信息有:姓名.手机号. 在进入系统时,显示如下菜单: ************************** ...