js實(shí)現(xiàn)同一頁面多個(gè)運(yùn)動(dòng)效果的方法
更新時(shí)間：2015年04月10日 10:28:16 作者：jingangel
這篇文章主要介紹了js實(shí)現(xiàn)同一頁面多個(gè)運(yùn)動(dòng)效果的方法,涉及javascript操作頁面元素運(yùn)動(dòng)效果的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)同一頁面多個(gè)運(yùn)動(dòng)效果的方法。分享給大家供大家參考。具體分析如下：
實(shí)現(xiàn)原理，就是在調(diào)用的時(shí)候，給這五個(gè)元素，循環(huán)加上事件。需要注意的是，每個(gè)元素的定時(shí)器需要分開。
要點(diǎn)一：
var speed = (target - obj.offsetWidth)/8;
緩沖運(yùn)動(dòng)效果，一開始速度很快，然后越來越慢，直到停止
speed = speed>0?Math.ceil(speed):Math.floor(speed);
如果速度大于0，則向上取整，如果速度小于0，則向下取整。
要點(diǎn)二：
if(obj.offsetWidth == target){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+speed+"px";
}
元素寬度和目標(biāo)值比較，如果相等，關(guān)閉定時(shí)器，否則，寬度繼續(xù)增加。
要點(diǎn)三：
for(i=0; i<runs_li.length; i++){
runs_li[i].timer = null;
runs_li[i].onmouseover = function(){
startrun(this,300);
}
runs_li[i].onmouseout = function(){
startrun(this,80);
}
}
給每個(gè)元素加上各自的定時(shí)器屬性，各自的鼠標(biāo)事件，在鼠標(biāo)事件中調(diào)用運(yùn)動(dòng)函數(shù)。
最后，上代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style>
body,ul,li{margin:0; padding:0;}
#runs li{width:80px; height:80px; background:#06c; list-style:none;
position:absolute; left:0;}
</style>
<script>
window.onload = function(){
var runs = document.getElementById("runs");
var runs_li = runs.getElementsByTagName("li");
var i=0;
for(i=0; i<runs_li.length; i++){
runs_li[i].timer = null;
runs_li[i].onmouseover = function(){
startrun(this,300);
}
runs_li[i].onmouseout = function(){
startrun(this,80);
}
}
}
function startrun(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target - obj.offsetWidth)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth == target){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+speed+"px";
}
document.title = obj.offsetWidth + ',' + target;
},30);
}
</script>
</head>
<body>
<ul id="runs">
<li style="top:0">1</li>
<li style="top:90px;">2</li>
<li style="top:180px;">3</li>
<li style="top:270px;">4</li>
<li style="top:360px;">5</li>
</ul>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JavaScript拖拽、碰撞、重力及彈性運(yùn)動(dòng)實(shí)例分析
- js運(yùn)動(dòng)應(yīng)用實(shí)例解析
- 淺析JS運(yùn)動(dòng)
- JavaScript運(yùn)動(dòng)減速效果實(shí)例分析
- 純js模擬div層彈性運(yùn)動(dòng)的方法
- javascript實(shí)現(xiàn)10個(gè)球隨機(jī)運(yùn)動(dòng)、碰撞實(shí)例詳解
- javascript運(yùn)動(dòng)詳解
- javascript關(guān)于運(yùn)動(dòng)的各種問題經(jīng)典總結(jié)
- js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法
- js實(shí)現(xiàn)同一頁面多個(gè)不同運(yùn)動(dòng)效果的方法
- js運(yùn)動(dòng)動(dòng)畫的八個(gè)知識(shí)點(diǎn)
- JS運(yùn)動(dòng)相關(guān)知識(shí)點(diǎn)小結(jié)(附彈性運(yùn)動(dòng)示例)
相關(guān)文章
用js來刷新當(dāng)前頁面保留參數(shù)的具體實(shí)現(xiàn)
本文為大家詳細(xì)介紹下如何使用js來刷新當(dāng)前頁面保留參數(shù)，下面有個(gè)不錯(cuò)的實(shí)現(xiàn)大家可以看看2013-12-12
根據(jù)表格中的某一列進(jìn)行排序的javascript代碼
根據(jù)表格中的某一列進(jìn)行排序的實(shí)現(xiàn)方法有很多，下面為大家介紹下如何使用js來簡(jiǎn)單實(shí)現(xiàn)下，需要的朋友不要錯(cuò)過2013-11-11
怎么用javascript進(jìn)行拖拽2...2006-07-07
模塊系統(tǒng)是什么？簡(jiǎn)單來說，其實(shí)就是我們?cè)谝粋€(gè)文件里寫代碼，聲明一些可以導(dǎo)出的字段，然后另一個(gè)文件可以將其導(dǎo)入并使用。今天我們來聊聊?JavaScript?的模塊系統(tǒng)，感興趣的可以了解一下2022-11-11
BootStrap table刪除指定行的注意事項(xiàng)(筆記整理)
在前端開發(fā)中遇到這樣的問題，對(duì)于table指定行的數(shù)據(jù)進(jìn)行刪除，花了好長(zhǎng)時(shí)間才解決，今天小編抽時(shí)間給大家介紹BootStrap table刪除指定行的注意事項(xiàng)，需要的朋友參考下吧2017-02-02
javascript中2個(gè)感嘆號(hào)的用法實(shí)例詳解
這篇文章主要介紹了javascript中2個(gè)感嘆號(hào)的用法,并用大量的實(shí)例講述了!!的常見應(yīng)用情況,是非常實(shí)用的技巧,需要的朋友可以參考下2014-09-09
深入理解JavaScript系列（15） 函數(shù)（Functions）
本章節(jié)我們要著重介紹的是一個(gè)非常常見的ECMAScript對(duì)象——函數(shù)（function),我們將詳細(xì)講解一下各種類型的函數(shù)是如何影響上下文的變量對(duì)象以及每個(gè)函數(shù)的作用域鏈都包含什么，以及回答諸如像下面這樣的問題：下面聲明的函數(shù)有什么區(qū)別么2012-04-04
這篇文章主要給大家介紹了關(guān)于如何使用JavaScript解析URL的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JavaScript運(yùn)動(dòng)函數(shù)實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript的運(yùn)動(dòng)函數(shù)，使用實(shí)例在論證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
微信小程序中時(shí)間戳和日期的相互轉(zhuǎn)換問題
這篇文章主要介紹了微信小程序中時(shí)間戳和日期的相互轉(zhuǎn)換問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07