js實現(xiàn)緩動動畫
更新時間：2020年11月25日 11:57:46 作者：小小小菜雞zzzz
這篇文章主要為大家詳細介紹了js實現(xiàn)緩動動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)緩動動畫的具體代碼，供大家參考，具體內容如下
利用定時器來控制元素的offsetLeft的值，offsetLeft = 開始位置 + （最終位置 - 開始位置）* 緩動系數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
border: none;
list-style: none;
}
body {
background-color: pink;
}
#nav {
width: 900px;
height: 63px;
background: url("images/doubleOne.png") no-repeat right center #fff;
margin: 0 auto;
margin-top: 50px;
border-radius: 5px;
position: relative;
}
#nav ul {
line-height: 70px;
}
#nav ul li {
float: left;
height: 63px;
width: 88px;
text-align: center;
cursor: pointer;
position: relative;
}
#t_mail {
width: 88px;
height: 63px;
background: url("images/tMall.png") no-repeat;
position: absolute;
}
</style>
</head>
<body>
<nav id="nav">
<span id="t_mail"></span>
<ul>
<li>雙11狂歡</li>
<li>服裝會場</li>
<li>數(shù)碼家電</li>
<li>母嬰童裝</li>
<li>手機會場</li>
<li>美妝會場</li>
<li>家居建材</li>
<li>進口會場</li>
<li>飛豬旅行</li>
</ul>
</nav>
<script>
window.onload = function () {
var nav = $('nav');
var t_mall = nav.children[0];
var ul = nav.children[1];
var allLis = ul.children;
var beginX = 0;
for (var i = 0; i < allLis.length; i++) {
var li = allLis[i];
li.onmouseover = function () {
end = this.offsetLeft;
}
li.onmousedown = function () {
beginX = this.offsetLeft;
}
li.onmouseout = function () {
end = beginX;
}
}
var begin = 0, end = 0;
setInterval(function () {
begin = begin + (end - begin) / 10;
t_mall.style.left = begin + 'px';
}, 10)
function $(id) {
return typeof id ? document.getElementById(id) : null;
}
}
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
使用?Schema-Utils?對?Webpack?Plugin?進行配置項校驗的簡單用例
schema-utils?庫用于在?loader?和?plugin?實例化時，對傳入的參數(shù)進行校驗，本文重點給大家介紹使用?Schema-Utils?對?Webpack?Plugin?進行配置項校驗的用例詳解，感興趣的朋友一起看看吧2022-03-03
JavaScript使用slice函數(shù)獲取數(shù)組部分元素的方法
這篇文章主要介紹了JavaScript使用slice函數(shù)獲取數(shù)組部分元素的方法,涉及javascript中slice方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
用函數(shù)模板,寫一個簡單高效的 JSON 查詢器的方法介紹
本篇文章小編將為大家介紹，用函數(shù)模板,寫一個簡單高效的 JSON 查詢器的方法介紹，需要的朋友可以參考一下2013-04-04
下面小編就為大家?guī)硪黄昝澜鉀QJS文件頁面加載時的阻塞問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
javascript dom操作之cloneNode文本節(jié)點克隆使用技巧
文本克隆函數(shù)cloneNode他有兩個參數(shù)——true or false2009-12-12
這篇文章主要介紹了深入理解 webpack 文件打包機制(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細介紹了Bootstrap導航中表單簡單實現(xiàn)代碼，含路徑導航的具體實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
使用幻燈片效果的網站目前很普遍，本以為很復雜，實現(xiàn)起來卻發(fā)現(xiàn)很簡單，現(xiàn)成的jquery插件jquery.KinSlideshow.js便可實現(xiàn)幻燈片效果2013-11-11
這篇文章主要介紹了console.log()的作用與實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要和大家介紹一下JavaScript中的變量,作用域和垃圾回收的定義與使用，文中的示例代碼講解詳細，對我們學習JavaScript有一定的幫助，需要的可以參考一下2022-11-11