JS多物體 任意值 鏈式 緩沖運動
更新時間：2012年08月10日 17:09:57 作者：
JS多物體 任意值 鏈式 緩沖運動,需要的朋友可以參考下
復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8" />
<meta http-equiv="content-type" content="text/html" />
<title>demo</title>
</head>
<style type="text/css">
ul,li,img{margin:0;padding:0;border:0;}
#list{height:250px;list-style-type:none;overflow:hidden;}
</style>
<body>
<div id="odiv" style="position:absolute;width:200px;height:100px;background:red;left:0;border:1px solid #333;"></div>
<script type="text/javascript">
var odiv=document.getElementById('odiv');
odiv.onmouseover=function(){
move(this,'width',500,function(){
move(odiv,'left',300,function(){
move(odiv,'height',500,function(){
move(odiv,'borderWidth',10)
})
})});}
function move(obj,arr,target,fn){
var dt=null,speed=0,ol=0;
clearInterval(dt);
dt=setInterval(function(){
ol=parseInt(obj.style[arr]);
if(ol==target){
clearInterval(dt);
if(fn) fn();
}else{
speed=(target-ol)/8;
speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
obj.style[arr]=ol+speed+"px";
}
},30);
}
</script>
</body>
</html>
相關文章
關于js復制內(nèi)容到瀏覽器剪貼板報錯：Cannot read properties of&n
這篇文章主要給大家介紹了關于js復制內(nèi)容到瀏覽器剪貼板報錯：Cannot read properties of undefined (reading ‘writeText‘)的解決方案,文中給出了詳細的原因分析和解決方案,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了ES6擴展運算符用法,結合實例形式分析了ES6擴展運算符的功能、使用方法與相關注意事項,需要的朋友可以參考下2017-10-10
本文主要介紹了在CEF中實現(xiàn)JavaScript和C++的雙向交互,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-02-02
JavaScript中報錯Cannot?set?properties?of?undefined?(settin
這篇文章主要介紹了JavaScript中報錯Cannot?set?properties?of?undefined?(setting?'1')的解決方案,文中通過代碼介紹的非常詳細,對大家學習或使用js具有一定的參考借鑒價值,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了JavaScript的流程控制語句，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript提取元素中第一個子元素的實現(xiàn)方法
本文主要介紹了JavaScript提取元素中第一個子元素的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
一直以為 && 和 || 這兩個偉大的運算法只能在判斷表達式使用，也就是常在if語句使用，原來錯了，它還可以運用在簡化選擇性執(zhí)行語句的操作，有點拗口，簡單點也就是：操作執(zhí)行某條語句，不執(zhí)行某條語句。2009-11-11
我們在項目中往往都能遇到實現(xiàn)左右滑動跟上下滑動的需求,下面這篇文章主要給大家介紹了關于uniapp中scroll-view基礎用法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
記錄微信小程序 height: calc(xx - xx)；無效問題
這篇文章主要介紹了微信小程序 - height: calc(xx - xx)；無效 問題，文中給大家擴展介紹下jquery點擊添加樣式，再次點擊移除樣式的實例代碼,需要的朋友可以參考下2019-12-12
檢查輸入的是否是數(shù)字使用keyCode配合onkeypress事件
檢查輸入的是否是數(shù)字在本文使用keyCode配合onkeypress事件來實現(xiàn)，具體示例如下2014-01-01