溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹JS運動特效之任意值添加運動的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
具體如下：
回顧一下上個例子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[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'));//因為是通過[]調用屬性，所以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函數，分別把之前width變化改成height，borderWidht，和opacity透明度變化；但是這樣顯然浪費，可以把他們合并成一個函數，把變化的屬性作為參數傳進去就好了.
1. function startMove(obj,attr,iTarget) 函數里新增attr參數
2. 調用參數的方式：由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：把變化的屬性最為參數傳入
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>運行一下發現，改變寬，高，border都妥妥的，但是最后一個改變“透明度”沒反應，是什么問題那？？
首先opacity的值0.3一個小數，parseInt(getStyle(obj,attr)之后便變成0，還有最大的一個問題就是最后屬性值設置的時候：obj.style[attr] = objAttr+iSpeed+'px'; 顯然opacity并沒有px這個單位，所以需要對運動框架做進一步處理
需要判斷一下，當接受的參數是“透明度”的時候，需要單獨處理一下，把上面出問題的兩個地方做一下處理
var objAttr = 0;
if(attr == "opacity"){
// 由于計算機對 小數的處理有問題，這里用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); 由于計算機不能很精確的處理小數，會導致一些問題
用parseInt這種方法：objAttr = parseInt(parseFloat(getStyle(obj,attr))*100); 也可以處理小數，但是經過測試在鼠標移出的時候，與原來狀態有一點偏差
可以看出，當鼠標移出去的時候，opacity應該回到1，可結果卻是0.94 ；所以個人推薦用Math.round四舍五入函數來處理這里的小數問題
做一下判斷，下面也同樣做判斷
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：把變化的屬性最為參數傳入
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var objAttr = 0;
if(attr == "opacity"){
// 由于計算機對 小數的處理有問題，這里用parseFloat轉一下
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>最后結果演示：
以上是“JS運動特效之任意值添加運動的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
