我也是跟著老師的寫的，除了json不行外，鏈?zhǔn)胶推渌夹?，麻煩大佬幫忙看一?/h1>
move.js:
//獲取樣式，瀏覽器兼容
function getStyle(obj, attr) {
? if(obj.currentStyle) {
? ? return obj.currentStyle[attr];? ?}else {
? ? return getComputedStyle(obj,false)[attr];?
? }?
}
function startMove(obj, json, cb) {
? //定時(shí)器，方便清空
? //var obj.timer = null;
? //打開定時(shí)器之前，先清空，避免定時(shí)器重復(fù)開啟
? clearInterval(obj.timer);
? obj.timer = setInterval(function() {
? ? for(var attr in json) {
? ? ? //1.取當(dāng)前值
? ? ? var icur = 0;
? ? ? //透明度不需要最后加'px'，所以跟尺寸分情況討論
? ? ? if(attr == 'opacity') {
? ? ? ? //透明度非整數(shù)，且為了避免精度顯示問題
? ? ? ? icur = Math.round(parseFloat(getStyle(obj, attr))*100);
? ? ? ? //console.log('opacity:', icur);
? ? ? }else {
? ? ? ? icur = Math.round(parseFloat(getStyle(obj, attr)));?
? ? ? ? //icur = Math.round(Number(getStyle(obj, attr)));
? ? ? ? //console.log('getStyle:', getStyle(obj, attr));
? ? ? ? //console.log('icur:', icur);
? ? ? }
? ? ? //2.算速度
? ? ? var speed = (json[attr] - icur)/8;
? ? ? //向絕對值大的方向取整
? ? ? speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
? ? ? //console.log('speed:', speed);
? ? ? //3.到達(dá)目標(biāo)值，停止
? ? ? if(icur == json[attr]) {
? ? ? ? clearInterval(obj.timer);?
? ? ? ? if(cb) {
? ? ? ? ? //如果有回調(diào)函數(shù)，則執(zhí)行
? ? ? ? ? cb();?
? ? ? ? }
? ? ? }else {
? ? ? ? if(attr == 'opacity') {
? ? ? ? ? //IE和firefox的兼容性問題
? ? ? ? ? obj.style.filter = 'alpha:(opacity:'+icur + speed+')';
? ? ? ? ? obj.style.opacity = (icur+speed)/100;
? ? ? ? ? //console.log('一次運(yùn)動(dòng)后:', obj.style.opacity);
? ? ? ? ? }else {
? ? ? ? ? ? obj.style[attr] = icur + speed + 'px';?
? ? ? ? ? ? //console.log('一次運(yùn)動(dòng)后:', obj.style[attr]);
? ? ? ? ? }?
? ? ? }
? ? }
? }, 30);
}
下面是jsonMove.html:
<!DOCTYPE html>
<html>
? <head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <title>無標(biāo)題文檔</title>
? ? <style>
? ? ? * {
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? ? }
? ? ? #div1 {
? ? ? ? width: 200px;
? ? ? ? height: 200px;
? ? ? ? background: red;
? ? ? }
? ? </style>
? </head>
? <body>
? ? <div id="div1"></div>?
? ? <script src="js/move.js"></script>
? ? <script>
? ? ? window.onload = function() {
? ? ? ? var oDiv = document.getElementById('div1');
? ? ? ? oDiv.onmouseover = function() {
? ? ? ? ? var json1 = {width:400, height:200};
? ? ? ? ? startMove(oDiv, json1);?
? ? ? ? }
? ? ? }
? ? </script>
? </body>
</html>
move.js:
//獲取樣式，瀏覽器兼容
function getStyle(obj, attr) {
? if(obj.currentStyle) {
? ? return obj.currentStyle[attr];? ?}else {
? ? return getComputedStyle(obj,false)[attr];?
? }?
}
function startMove(obj, json, cb) {
? //定時(shí)器，方便清空
? //var obj.timer = null;
? //打開定時(shí)器之前，先清空，避免定時(shí)器重復(fù)開啟
? clearInterval(obj.timer);
? obj.timer = setInterval(function() {
? ? for(var attr in json) {
? ? ? //1.取當(dāng)前值
? ? ? var icur = 0;
? ? ? //透明度不需要最后加'px'，所以跟尺寸分情況討論
? ? ? if(attr == 'opacity') {
? ? ? ? //透明度非整數(shù)，且為了避免精度顯示問題
? ? ? ? icur = Math.round(parseFloat(getStyle(obj, attr))*100);
? ? ? ? //console.log('opacity:', icur);
? ? ? }else {
? ? ? ? icur = Math.round(parseFloat(getStyle(obj, attr)));?
? ? ? ? //icur = Math.round(Number(getStyle(obj, attr)));
? ? ? ? //console.log('getStyle:', getStyle(obj, attr));
? ? ? ? //console.log('icur:', icur);
? ? ? }
? ? ? //2.算速度
? ? ? var speed = (json[attr] - icur)/8;
? ? ? //向絕對值大的方向取整
? ? ? speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
? ? ? //console.log('speed:', speed);
? ? ? //3.到達(dá)目標(biāo)值，停止
? ? ? if(icur == json[attr]) {
? ? ? ? clearInterval(obj.timer);?
? ? ? ? if(cb) {
? ? ? ? ? //如果有回調(diào)函數(shù)，則執(zhí)行
? ? ? ? ? cb();?
? ? ? ? }
? ? ? }else {
? ? ? ? if(attr == 'opacity') {
? ? ? ? ? //IE和firefox的兼容性問題
? ? ? ? ? obj.style.filter = 'alpha:(opacity:'+icur + speed+')';
? ? ? ? ? obj.style.opacity = (icur+speed)/100;
? ? ? ? ? //console.log('一次運(yùn)動(dòng)后:', obj.style.opacity);
? ? ? ? ? }else {
? ? ? ? ? ? obj.style[attr] = icur + speed + 'px';?
? ? ? ? ? ? //console.log('一次運(yùn)動(dòng)后:', obj.style[attr]);
? ? ? ? ? }?
? ? ? }
? ? }
? }, 30);
}
下面是jsonMove.html:
<!DOCTYPE html>
<html>
? <head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <title>無標(biāo)題文檔</title>
? ? <style>
? ? ? * {
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? ? }
? ? ? #div1 {
? ? ? ? width: 200px;
? ? ? ? height: 200px;
? ? ? ? background: red;
? ? ? }
? ? </style>
? </head>
? <body>
? ? <div id="div1"></div>?
? ? <script src="js/move.js"></script>
? ? <script>
? ? ? window.onload = function() {
? ? ? ? var oDiv = document.getElementById('div1');
? ? ? ? oDiv.onmouseover = function() {
? ? ? ? ? var json1 = {width:400, height:200};
? ? ? ? ? startMove(oDiv, json1);?
? ? ? ? }
? ? ? }
? ? </script>
? </body>
</html>
2018-09-13
else {
? ? ? ? icur = Math.round(parseFloat(getStyle(obj, attr)));? ??
? }
這句錯(cuò)了，應(yīng)該是
else {
icur = parseInt(getStyle(obj, attr)); //整數(shù)型
}