js實現(xiàn)導(dǎo)航欄上下動畫效果詳細演示

3403771864 發(fā)布于2022-10-16 16:49 / 370人閱讀

　　在開發(fā)中實現(xiàn)上下動畫十分常見，現(xiàn)在為大家提供具體的參考內(nèi)容，具體內(nèi)容如下：

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

　　完美運動js插件，能根據(jù)傳進來的值，進行匹配，不僅有理想運動效果，且運行邏輯也是如此。

　　實現(xiàn)上下動畫動畫效果就是控制元素height的值，通過不斷的修改該值，就能呈現(xiàn)所謂的動畫效果，這里就需要用到定時器

　　定時器有兩種

　　一種是重復(fù)不斷的定時器 setInterval(fn,time);

　　另一種是延時只在設(shè)定時間后只出現(xiàn)一次的定時器 setTimeout(fn,time)

　　在經(jīng)歷所有的傳進的每一個值，都需用到一個boolean來控制是否完成解析，解析成功則返回true，結(jié)束定時器，返回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; //假設(shè)全部找到
　　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>關(guān)于</em><span></span></div>
　　<div><a href="javascript:;"></a><em>招聘</em><span></span></div>
　　<div><a href="javascript:;"></a><em>產(chǎn)品</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})
　　}
　　}
　　}

歡迎大家多多關(guān)注后續(xù)更多精彩內(nèi)容。