js实现导航栏上下动画效果详细演示

3403771864 发布于2022-10-16 16:49 / 363人阅读

　　在开发中实现上下动画十分常见，现在为大家提供具体的参考内容，具体内容如下：

　　obj.currentStyle[name] 与getComputedStyle(obj,false)[name]，一个是支持IE 一个支持FE

　　完美运动js插件，能根据传进来的值，进行匹配，不仅有理想运动效果，且运行逻辑也是如此。

　　实现上下动画动画效果就是控制元素height的值，通过不断的修改该值，就能呈现所谓的动画效果，这里就需要用到定时器

　　定时器有两种

　　一种是重复不断的定时器 setInterval(fn,time);

　　另一种是延时只在设定时间后只出现一次的定时器 setTimeout(fn,time)

　　在经历所有的传进的每一个值，都需用到一个boolean来控制是否完成解析，解析成功则返回true，结束定时器，返回false,知道返回true位置

　　function getStyle(obj, attr)
　　{
　　if(obj.currentStyle)
　　{
　　return obj.currentStyle[attr];
　　}
　　else
　　{
　　return getComputedStyle(obj, false)[attr];
　　}
　　}
　　function startMove(obj,json,fnEnd){
　　if(obj.timer){
　　clearInterval(obj.timer);
　　};
　　obj.timer=setInterval(function(){
　　var bStop = true; //假设全部找到
　　for(var attr in json){
　　var icurr = 0;
　　if(attr=='opacity'){//匹配key
　　icurr=Math.round(parseFloat(getStyle(obj,attr))*100); //获取元素的属性值
　　}else{
　　icurr=parseInt(getStyle(obj,attr));
　　};
　　var sPeed = (json[attr]-icurr)/8;
　　sPeed=sPeed>0?Math.ceil(sPeed):Math.floor(sPeed);
　　if(attr=='opacity'){
　　obj.style.filter="alpha(opacity:"+(icurr+sPeed)+")";
　　obj.style.opacity=(icurr+sPeed)/100;
　　}else{
　　obj.style[attr]=icurr+sPeed+'px';
　　}
　　if(icurr!=json[attr]){
　　bStop=false;
　　}
　　}
　　if(bStop){
　　clearInterval(obj.timer);
　　if(fnEnd){
　　fnEnd();
　　}
　　}
　　},30);
　　}
　　// alert('dffe');

　　html布局　

　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="UTF-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　<link rel="stylesheet" type="text/css" href="css/common.css" />
　　<script src="js/move.js"></script>
　　<script src="js/common.js"></script>
　　<title></title>
　　</head>
　　<body>
　　<div id="box">
　　<div><a href="javascript:;"></a><em>关于</em><span></span></div>
　　<div><a href="javascript:;"></a><em>招聘</em><span></span></div>
　　<div><a href="javascript:;"></a><em>产品</em><span></span></div>
　　<div><a href="javascript:;"></a><em>公司</em><span></span></div>
　　</div>
　　</body>
　　</html>

　　css文件　

　　*{
　　margin: 0;
　　padding: 0;
　　}
　　a{
　　text-decoration: none;
　　}
　　body{
　　background-color: #c1c1c1;
　　}
　　#box{
　　width: 880px;
　　margin: 100px auto;
　　overflow: hidden;
　　}
　　#box div{
　　width: 200px;
　　height: 100px;
　　float: left;
　　overflow: hidden;
　　position: relative;
　　}
　　#box div a{
　　position: absolute;
　　left: 0;
　　top: 0;
　　width: 200px;
　　height: 100px;
　　display: block;
　　/* background-color: red; */
　　background: url(../images/1.jpg) no-repeat;
　　}
　　#box div span{
　　display: block;
　　width: 200px;
　　height: 100px;
　　position: absolute;
　　background: url(../images/window.png) left top repeat-x;
　　}
　　#box div em{
　　display: block;
　　width: 100%;
　　height: 100%;
　　background-color: #999;
　　position: absolute;
　　text-align: center;
　　line-height: 100px;
　　font-family: Verdana;
　　font-style: normal;
　　font-size: 30px;
　　color: white;
　　text-shadow: 2px 1px 4px black;
　　top: 0;
　　}
　　#box div a.a01{
　　/* background: url(../images/1.jpg) 0 5px no-repeat; */
　　background-position: 0 5px;
　　}
　　#box div a.a02{
　　/* background: url(../images/1.jpg) 0 5px no-repeat; */
　　background-position: -200px 5px;
　　}
　　#box div a.a03{
　　/* background: url(../images/1.jpg) 0 5px no-repeat; */
　　background-position: -400px 5px;
　　}
　　#box div a.a04{
　　/* background: url(../images/1.jpg) 0 5px no-repeat; */
　　background-position: -600px 5px;
　　}

　　window.οnlοad=fn

　　window.onload=function(){
　　var oDiv = document.getElementById('box');
　　var aDiv = oDiv.getElementsByTagName('div');
　　var aEm = oDiv.getElementsByTagName('em');
　　var aEm = oDiv.getElementsByTagName('em');
　　for(var i=0;i<aDiv.length;i++)
　　{
　　aDiv[i].index = i;
　　aDiv[i].onmouseover = function()
　　{
　　startMove(aEm[this.index],{top:-aEm[this.index].offsetHeight})
　　}
　　aDiv[i].onmouseout = function()
　　{
　　startMove(aEm[this.index],{top:0})
　　}
　　}
　　}

欢迎大家多多关注后续更多精彩内容。

GPU云服务器云服务器导航栏tab切换效果 js 上下滚动导航 js导航栏代码 js局部切换导航栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128014.html

task0002（四）- 练习：数据处理、轮播及交互

摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。转载自我的个人博客欢迎大家批评指正包括5部分：小练习1-处理用户输入小练习2-日期对象的使用小练习3：轮播图小练习4：输入提示框小练习...

cnTomato 2019-08-22 10:59 评论0 收藏0
task0002（四）- 练习：数据处理、轮播及交互

摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。转载自我的个人博客欢迎大家批评指正包括5部分：小练习1-处理用户输入小练习2-日期对象的使用小练习3：轮播图小练习4：输入提示框小练习...

赵春朋 2019-08-01 15:00 评论0 收藏0
小程序·云开发实战 - 校园约拍小程序

摘要：接下来我将结合项目的讲解给大家分享一些实用技术和对于云开发的一些经验，希望对正在学习小程序的你有帮助。创意来源于生活，之所以开发这个校园约拍小程序，是因为在摄影选修课上常听老师抱怨外出写生老找不到模特，许多大学生都想拥有一套专属自己记忆的摄影作品，记录下不会磨灭的美好回忆，可如何找到让自己满意的摄影师是他们的难题。悦拍屋是一个校园摄影o2o的约拍平台，提供全方位的约拍服务，同时提供一...

QiShare 2019-08-26 10:34 评论0 收藏0
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️

响应式可过滤的游戏+工具展示页面用于各种网站以按类别对图像进行排序。在本文中，我将向您展示如何借助 HTML CSS 和 javascript 创建响应式可过滤的游戏+工具展示页面。可过滤作品集是一种流行的网络元素，可用于各种网站。它是一种作品画廊，大量作品整齐地排列在一起。值得注意的一点是，所有作品都可以在这里按类别排序。有一个导航栏，其中对所有类别进行了排序。单击这些类别中的任何一个时。...

Lavender 2021-09-06 15:00 评论0 收藏0