导航栏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> ...
随机推荐
- ZOJ 1090 The Circumference of the Circle
原题链接 题目大意:已知三角形的三个顶点坐标,求其外接圆的周长. 解法:刚看到这道题时,马上拿出草稿纸画图,想推导出重心坐标,然后求出半径,再求周长.可是这个过程太复杂了,写到一半就没有兴致了,还是求 ...
- 对石家庄铁道大学官网UI设计的分析
在这一周周一,老师给我们讲了PM,通过对PM的学习,我知道了PM 对项目所有功能的把握, 特别是UI.最差的UI, 体现了团队的组织架构:其次, 体现了产品的内部结构:最好, 体现了用户的自然需求.在 ...
- java List 排序 Collections.sort()
用Collections.sort方法对list排序有两种方法 第一种是list中的对象实现Comparable接口,如下: /** * 根据order对User排序 */ public class ...
- mysql in和or查询效率
http://blog.chinaunix.net/uid-20639775-id-3416737.html 上面链接博主的文章分析结论: or在没有索引的情况下呈指数增长,in则是正常递增. or的 ...
- html部分---通用标签与属性；
body的属性: bgcolor页面背景色:text文字颜色:topmargin上页边距:leftmargin左页边距:rightmargin右页边距:bottomargin下页边距: src是引用过 ...
- 黑马程序员——JAVA基础之String和StringBuffer
------- android培训.java培训.期待与您交流! ---------- String类: 字符串是一个特殊的对象. 字符串一旦初始化就不可以被改变. String str = &quo ...
- 磁盘分区、格式化、挂载[转自vbird]
磁盘分区.格式化.挂载磁盘分区 新增分区 查询分区 删除分区磁盘格式化 mkfs mke2fs磁盘挂载与卸载 mount umount 磁盘的分区.格式化.挂 ...
- php strtotime 和 date 日期操作
time()得到的数值是1970-1-1到现在的秒数,strtotime("now")也是,两个值是相同的. http://doc.thinkphp.cn/manual/syste ...
- （转）The 9 Deep Learning Papers You Need To Know About (Understanding CNNs Part 3)
Adit Deshpande CS Undergrad at UCLA ('19) Blog About The 9 Deep Learning Papers You Need To Know Abo ...
- caffe: compile error: Could not open or find file your path~~/resized_data/0 and a total of 2 images .
I0219 14:48:40.965386 31108 net.cpp:76] Memory required for data: 0I0219 14:48:40.965517 31108 layer ...