JS運動特效之任意值添加運動的方法分析
本文實例講述了JS運動特效之任意值添加運動的方法。分享給大家供大家參考，具體如下：
回顧一下上個例子JS實現(xiàn)多物體運動的方法：
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 給每個li都添加一個timer
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
function getStyle(obj,attr){
return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
}
function startMove(obj,iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var objWidth = parseInt(getStyle(obj,'width'));//因為是通過[]調(diào)用屬性，所以width必須加單引號
// var iSpeed = (iTarget -obj.offsetWidth)/10;
// 因為objWidth存放的就是當(dāng)前對象的寬，所以直接寫objWidth而不是obj.objWidth
var iSpeed = (iTarget -objWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(objWidth == iTarget){
clearInterval(obj.timer);
}else{
obj.style.width = objWidth+iSpeed+'px';
}
},30);
}
</script>
如果此時需求有變化，讓第2個li鼠標移入，高度變化，第三個li鼠標依然邊框，第四個li鼠標移入背景變化。一種辦法就是復(fù)制幾分startMove函數(shù)，分別把之前width變化改成height，borderWidht，和opacity透明度變化；但是這樣顯然浪費，可以把他們合并成一個函數(shù)，把變化的屬性作為參數(shù)傳進去就好了.
1. function startMove(obj,attr,iTarget) 函數(shù)里新增attr參數(shù)
2. 調(diào)用參數(shù)的方式：由obj.style.屬性名 變成 obj.style[屬性名]
3. 需要分別為每個li添加事件
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 給每個li都添加一個timer
liTags[0].onmouseover = function () {
startMove(this,'width',400);
}
liTags[0].onmouseout = function () {
startMove(this,'width',200);
}
liTags[1].onmouseover = function () {
startMove(this,'height',100);
}
liTags[1].onmouseout = function () {
startMove(this,'height',50);
}
liTags[2].onmouseover = function () {
startMove(this,'borderWidth',10);
}
liTags[2].onmouseout = function () {
startMove(this,'borderWidth',2);
}
liTags[3].onmouseover = function () {
startMove(this,'padding',10);
}
liTags[3].onmouseout = function () {
startMove(this,'padding',0);
}
}
}
function getStyle(obj,attr){
return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
}
function startMove(obj,attr,iTarget) {//attr：把變化的屬性最為參數(shù)傳入
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var objAttr = parseInt(getStyle(obj,attr));
var iSpeed = (iTarget -objAttr)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(objAttr == iTarget){
clearInterval(obj.timer);
}else{
//obj.style.width = objWidth+iSpeed+'px';
obj.style[attr] = objAttr+iSpeed+'px';// 需要又.屬性名的形式改成[]
}
},30);
}
</script>
運行一下發(fā)現(xiàn)，改變寬，高，border都妥妥的，但是最后一個改變“透明度”沒反應(yīng)，是什么問題那？？
首先opacity的值0.3一個小數(shù)，parseInt(getStyle(obj,attr)之后便變成0，還有最大的一個問題就是最后屬性值設(shè)置的時候：obj.style[attr] = objAttr+iSpeed+'px'; 顯然opacity并沒有px這個單位，所以需要對運動框架做進一步處理
需要判斷一下，當(dāng)接受的參數(shù)是“透明度”的時候，需要單獨處理一下，把上面出問題的兩個地方做一下處理
var objAttr = 0;
if(attr == "opacity"){
// 由于計算機對 小數(shù)的處理有問題，這里用Math.round處理一下
// objAttr = parseFloat(getStyle(obj,attr)*100);
//objAttr = parseInt(parseFloat(getStyle(obj,attr))*100);
objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
objAttr = parseInt(getStyle(obj,attr));
}
如果不做處理直接 objAttr = parseFloat(getStyle(obj,attr)*100); 由于計算機不能很精確的處理小數(shù)，會導(dǎo)致一些問題
用parseInt這種方法：objAttr = parseInt(parseFloat(getStyle(obj,attr))*100); 也可以處理小數(shù)，但是經(jīng)過測試在鼠標移出的時候，與原來狀態(tài)有一點偏差
可以看出，當(dāng)鼠標移出去的時候，opacity應(yīng)該回到1，可結(jié)果卻是0.94 ；所以個人推薦用Math.round四舍五入函數(shù)來處理這里的小數(shù)問題
做一下判斷，下面也同樣做判斷
if(attr == "opacity"){
obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
obj.style.opacity = (objAttr+iSpeed)/100;
}else{
//obj.style.width = objWidth+iSpeed+'px';
obj.style[attr] = objAttr+iSpeed+'px';// 需要又.屬性名的形式改成[]
}
完整代碼：
HTML部分
<body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body>
css部分：
<style>
ul{list-style: none;}
ul li{
margin: 10px;
width: 200px;height: 50px;
border: 2px solid #c00;
background: lightblue;
}
</style>
js部分
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 給每個li都添加一個timer
liTags[0].onmouseover = function () {
startMove(this,'width',400);
}
liTags[0].onmouseout = function () {
startMove(this,'width',200);
}
liTags[1].onmouseover = function () {
startMove(this,'height',100);
}
liTags[1].onmouseout = function () {
startMove(this,'height',50);
}
liTags[2].onmouseover = function () {
startMove(this,'borderWidth',10);
}
liTags[2].onmouseout = function () {
startMove(this,'borderWidth',2);
}
liTags[3].onmouseover = function () {
startMove(this,'opacity',30);
}
liTags[3].onmouseout = function () {
startMove(this,'opacity',100);
}
}
}
function getStyle(obj,attr){
return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
}
function startMove(obj,attr,iTarget) {//attr：把變化的屬性最為參數(shù)傳入
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var objAttr = 0;
if(attr == "opacity"){
// 由于計算機對 小數(shù)的處理有問題，這里用parseFloat轉(zhuǎn)一下
objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
objAttr = parseInt(getStyle(obj,attr));
}
var iSpeed = (iTarget -objAttr)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(objAttr == iTarget){
clearInterval(obj.timer);
}else{
if(attr == "opacity"){
obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
obj.style.opacity = (objAttr+iSpeed)/100;
}else{
//obj.style.width = objWidth+iSpeed+'px';
obj.style[attr] = objAttr+iSpeed+'px';
}
}
},30);
}
</script>
最后結(jié)果演示：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
javascript中內(nèi)置對象Math的介紹及用法案例
Math對象是一個內(nèi)置對象,具有數(shù)學(xué)常數(shù)和函數(shù)的屬性和方法,不是一個函數(shù)對象,下面這篇文章主要給大家介紹了關(guān)于javascript中內(nèi)置對象Math的介紹及用法案例的相關(guān)資料,需要的朋友可以參考下2022-03-03
微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài)
這篇文章主要介紹了微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
Navigator.clipboard?API可以用來訪問系統(tǒng)剪貼板，可以實現(xiàn)【剪切、復(fù)制、粘貼】功能。該?API?被設(shè)計用來取代使用?document.execCommand()?的剪貼板訪問方式，不兼容?IE2023-05-05
嚴格模式就是使JS編碼更加規(guī)范化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為。下面通過代碼相結(jié)合的形式給大家介紹js中的嚴格模式，感興趣的朋友一起看看吧2018-06-06
jQuery與原生JavaScript選擇HTML元素集合用法對比分析
這篇文章主要介紹了jQuery與原生JavaScript選擇HTML元素集合用法,結(jié)合實例形式對比分析了jquery與原生JavaScript選擇頁面HTML相關(guān)操作方法、注意事項及運行效率,需要的朋友可以參考下2019-11-11
html文件如何獲取，有很多朋友對此表示疑問，在本文將為大家介紹下使用js的或許方法，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
去除鏈接虛線全面分析總結(jié)...2006-08-08
通過 JS 獲取頁面相關(guān)的尺寸是比較常見的操作,尤其是在動態(tài)計算頁面布局時,今天我們就來學(xué)習(xí)一下幾個獲取頁面尺寸的基本方法,需要的朋友可以參考下2023-09-09
replace() 方法用于將字符串用一些字符替換另一些字符，如果用正則表達式替換時， regexp 具有全局標志 g，下面有個不錯的示例，感興趣的朋友可以參考下2013-10-10
前端根據(jù)鏈接生成二維碼的方案及相關(guān)常用API
這篇文章主要介紹了qrcode插件的使用方法,包括ES6/ES7示例、常用API及Vue示例,同時還討論了二維碼的優(yōu)點和缺點,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01