纯JS实现弹性导航条效果,javascript实现的鼠标悬

作者: 关于计算机  发布:2019-09-20

动态翻滚的导航条

效果图:

  • 剧本之家
  • 网页特效
  • 工具软件
  • 源码下载
  • 菜单导航
  • 层和布局
  • 论坛社区
  • 广告联系

图片 1

[Ctrl+A 全选 注:如需引进外界Js需刷新技艺试行]

代码如下:

假如大家不希罕那些颜色,能够修改代码中的图片的水彩就可以。

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
<style>
*{margin:0; padding:0; list-style:none;}
ul{ overflow:hidden; background:#ccc; width:574px; margin:100px auto; position:relative;}
ul li{ float:left; width:80px; height:40px; text-align:center; line-height:40px; border:1px solid #000; position:relative; z-index:2;}
#block_box{ position:absolute; top:0; left:0; background:#399; z-index:1;}
</style>
<script>
var left = 0;
var iSpeed = 0;
function move(obj,iTarget){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 iSpeed+=(iTarget-left)/5;
 iSpeed*=0.75;
 left+=iSpeed;
 obj.style.left = left+'px';
 if(Math.round(iSpeed)==0&&Math.round(left)==iTarget){
  clearInterval(obj.timer);
 }
 },30);
}
window.onload = function(){
 var aLi = document.getElementsByTagName('li');
 var oBlock = document.getElementById('block_box');
 var iNow = 0;
 for(var i=0;i<aLi.length-1;i++){
 ;(function(index){
  aLi[i].onmouseover = function(){
  //oBlock.style.left = index*aLi[0].offsetWidth+'px';
  move(oBlock,index*aLi[0].offsetWidth);
  };
  aLi[i].onmouseout = function(){
  //oBlock.style.left = 0;
  move(oBlock,iNow*aLi[0].offsetWidth);
  };
  aLi[i].onclick = function(){
  iNow=index;
  };
 })(i);
 }
};
</script>
</head>
<body>
<ul>
 <li>首页</li>
 <li>CSS课程</li>
 <li>JS课程</li>
 <li>HTML5课程</li>
 <li>视频教程</li>
 <li>课程案例</li>
 <li>联系方式</li>
 <li id="block_box"></li>
</ul>
</body>
</html>

你恐怕感兴趣的稿子:

  • 纯JS完成弹性导航条效果
  • js实现横向拖拽导航条功用
  • 依赖JS代码实现导航条弹出式悬浮菜单
  • JS完成选中当前美食指南后高亮突显的导航条效果
  • JS+CSS完结鼠标滑过时动态翻滚的导航条效果
  • JS+CSS达成带有碰撞缓冲效果的竖向导航条代码
  • CSS3+Js完成响应式导航条
  • 仿客齐集首页导航条DIV+CSS+JS [代码实例]
  • 应用js定义贰个导航条菜单

以上正是本文的全部内容,希望本文的剧情对大家的求学也许干活能推动一定的支援,同一时候也指望多多支持脚本之家!

你大概感兴趣的篇章:

  • js达成横向拖拽导航条功用
  • 基于JS代码完成导航条弹出式悬浮菜单
  • JS完毕选中当前菜谱后高亮突显的导航条效果
  • JS+CSS完结鼠标滑过时动态翻滚的导航条效果
  • JS+CSS达成带有碰撞缓冲效果的竖向导航条代码
  • CSS3+Js达成响应式导航条
  • javascript落实的鼠标悬停时动态翻滚的导航条
  • 仿客齐集首页导航条DIV+CSS+JS [代码实例]
  • 应用js定义多少个导航条菜单

本文由贝博体育app发布于关于计算机,转载请注明出处:纯JS实现弹性导航条效果,javascript实现的鼠标悬

关键词: