                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫效果

可以幫忙看下代碼嗎

<!DOCTYPE html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title>Title</title>

? ? <style type="text/css">

? ? ? ? *{

? ? ? ? ? ? margin: 0;

? ? ? ? ? ? padding: 0;

? ? ? ? }

? ? ? ? div {

? ? ? ? ? ? width: 1000px;

? ? ? ? ? ? height: 300px;

? ? ? ? ? ?

? ? ? ? ? ? background: #0e90d2;

? ? ? ? ? ? filter: alpha(opacity:30);

? ? ? ? ? ? opacity: 0.3

? ? ? ?

? ? ? ? }

? ? </style>

</head>

<body>

<div>

</div>

? ? window.onload = function () {

? ? ? ? var oDiv = document.getElementsByTagName('div')[0],

? ? ? ? ? timer = null;

? ? ? ? oDiv.onmouseover = function () {

? ? ? ? ? ? startMove('opacity',100);

? ? ? ? }

? ? ? ? oDiv.onmouseout = function () {

? ? ? ? ? ? startMove('opacity',30);

? ? ? ? }

? ? } ? ?

? ? ? ??

? ? ? ? function startMove(attr,iTarget) {

? ? ? ? ? ? clearInterval(timer);

? ? ? ? ? ? timer = setInterval(function(){

? ? ? ? ? ? ? ? var oDiv = document.getElementsByTagName('div')[0],

? ? ? ? ? ? ? ? var icur=0;

? ? ? ? ? ? ? ? if(attr=='opacity'){

? ? ? ? ? ? ? ? icur=Math.round(parseFloat(getStyle(oDiv,attr))*100);

? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? else{

? ? ? ? ? ? ? ? ?icur=parseInt(getStyle(oDiv,attr));

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? var speed=(iTarget-icur)/8;

? ? ? ? ? ? ? ? speed=speed>0?Math.ceil(speed):Math.floor(speed);

? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? if(icur==iTarget){

? ? ? ? ? ? ? ? ? clearInterval(timer);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? else{

? ? ? ? ? ? ? ? ?if(attr=='opacity'){

? ? ? ? ? ? ? ? ?icur+=speed;

? ? ? ? ? ? ? ? ? ? ?oDiv.style.filter='alpha(opacity:'+icur+')';

? ? ? ? ? ? ? ? ? ? ?oDiv.style.opacity=icur/100;

? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ?else{

? ? ? ? ? ? ? ? ?oDiv.style[attr]=icur+speed+'px'

? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ?}

? ? ? ? ? ? ?}, 30)

? ? ? ? ?}

? ??

? ? //獲取css樣式

? ? function getStyle(obj, attr) {

? ? ? ? if (obj.currentStyle) {

? ? ? ? ? ? return obj.currentStyle[attr];

? ? ? ? }

? ? ? ? else {

? ? ? ? ? ? return getComputedStyle(obj, null)[attr];

? ? ? ? }

? ? }

</script>

</body>

</html>

如加入obj參數(shù) 則

?? ? oDiv.onmouseover = function () {

? ? ? ? ? ? startMove(this,'opacity',100);

? ? ? ? }

在這里我不用obj的參數(shù)可以么直接默認(rèn)為oDiv 不知道是不是這個(gè)原因？

poudoudou

2016-10-12

源自：JS動(dòng)畫效果 4-4

關(guān)注問題我要回答

781

操作

收起

4 回答

黑色秋水
2016-10-21

理論上沒什么問題，但是不能應(yīng)用于多物體運(yùn)動(dòng)

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

poudoudou 提問者
2016-10-20

謝謝親的答復(fù) 但是在不傳入obj的參數(shù)的情況下之前已經(jīng)有定義timer=null，因此之后可以開始就可以clearsetinterval 不知道對不對。。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

黑色秋水
2016-10-20

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style?type="text/css">
????????*{
????????????margin:?0;
????????????padding:?0;
????????}
????????div?{
????????????width:?1000px;
????????????height:?300px;
???????????
????????????background:?#0e90d2;
????????????filter:?alpha(opacity:30);
????????????opacity:?0.3
???????
????????}

????</style>
</head>
<body>
<div>

</div>
<script?type="text/javascript">
????window.onload?=?function?()?{
????????var?oDiv?=?document.getElementsByTagName('div')[0],
????????
????????timer?=?null;

????????oDiv.onmouseover?=?function?()?{
????????????startMove(this,'opacity',100);
????????}

????????oDiv.onmouseout?=?function?()?{
????????????startMove(this,'opacity',30);
????????}
????}????
????????


????????function?startMove(obj,attr,iTarget)?{

????????????clearInterval(obj.timer);
????????????obj.timer?=?setInterval(function(){
????????????????var?oDiv?=?document.getElementsByTagName('div')[0];
????????????????var?icur=0;
????????????????if(attr=='opacity'){
????????????????icur=Math.round(parseFloat(getStyle(oDiv,attr))*100);
?????????????????}
????????????????else{
?????????????????icur=parseInt(getStyle(oDiv,attr));
????????????????}

????????????????var?speed=(iTarget-icur)/8;
????????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????????????????
????????????????if(icur==iTarget){
??????????????????clearInterval(obj.timer);
????????????????}
????????????????else{
?????????????????if(attr=='opacity'){
?????????????????icur+=speed;
?????????????????????oDiv.style.filter='alpha(opacity:'+icur+')';
?????????????????????oDiv.style.opacity=icur/100;
?????????????????}
????????????????
?????????????????else{
?????????????????oDiv.style[attr]=icur+speed+'px'
?????????????????}
?????????????}
?????????????},?30)
?????????}

????

????//獲取css樣式
????function?getStyle(obj,?attr)?{
????????if?(obj.currentStyle)?{
????????????return?obj.currentStyle[attr];
????????}
????????else?{
????????????return?getComputedStyle(obj,?null)[attr];
????????}
????}
</script>
</body>
</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

黑色秋水

在你基礎(chǔ)上改的：1.你的startMove函數(shù)里面第四行，你第三行結(jié)尾是個(gè)逗號(hào)，應(yīng)該是想同時(shí)定義多個(gè)變量，那你第四行var就不用寫; 2timer問題，參照老師的代碼，this是需要傳入的，以便將timer綁定在元素對象上，不然函數(shù)開始就清除一個(gè)未定義的定時(shí)器會(huì)報(bào)錯(cuò);

2016-10-20 回復(fù) 有任何疑惑可以回復(fù)我~

#2

poudoudou 提問者回復(fù) 黑色秋水

謝謝親的答復(fù) 但是在不傳入obj的參數(shù)的情況下之前已經(jīng)有定義timer=null，因此之后可以開始就可以clearsetinterval 不知道對不對。。

2016-10-20 回復(fù) 有任何疑惑可以回復(fù)我~