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存放的就是當前對象的寬，所以直接寫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鼠標移入背景變化。一種辦法就是復制幾分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這個單位，所以需要對運動框架做進一步處理
需要判斷一下，當接受的參數(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ù)，會導致一些問題
用parseInt這種方法：objAttr = parseInt(parseFloat(getStyle(obj,attr))*100); 也可以處理小數(shù)，但是經(jīng)過測試在鼠標移出的時候，與原來狀態(tài)有一點偏差
可以看出，當鼠標移出去的時候，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ù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
js隨機名言2008-09-09
uniapp使用webview嵌入vue頁面及通信實現(xiàn)方式
項目中有需要嵌入其他H5的頁面的業(yè)務(wù)需求,這篇文章主要給大家介紹了關(guān)于uniapp使用webview嵌入vue頁面及通信實現(xiàn)方式的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
javascript設(shè)計模式 – 中介者模式原理與用法實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 中介者模式,結(jié)合實例形式分析了javascript中介者模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了javascript順序加載圖片的方法,可實現(xiàn)javascript針對圖片的逐次加載,從而減緩服務(wù)器壓力,非常具有實用價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了微信小程序點餐系統(tǒng)開發(fā)常見問題匯總,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了微信小程序轉(zhuǎn)盤抽獎的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本文給大家?guī)砹嘶趈s實現(xiàn)簡單的音頻播放功能，數(shù)據(jù)是由后臺提供的，具體實例代碼大家參考下本文2018-01-01
關(guān)于遞歸運算的順序測試代碼，需要的朋友可以參考下。2011-11-11
這篇文章主要介紹了JavaScript中嚴格判斷NaN的方法，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下2018-02-02
本文主要介紹了js實現(xiàn)按座位號抽獎的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04