JS动画效果_技术笔记

weixin_精慕门4485437 2020-08-22

q123

截图
0赞 · 0采集

qq_慕雪6274093 2020-07-05

<html>
    <head>
    <style>
        div{
        width:200px;
        height;200px
        background-color:red;
        opacity:.3;
        }
    </style>
    </head>
    <body>
    <div>
    </div>
    
    <script>
        var adiv=document.querSelector("div");
        adiv.onmouseover=function(){
            startMove(100);
        }
         adiv.onmouseout=function(){
            startMove(30);
        }
        var time=null;
        var opacitys=30;
        function startMove(Itarge){
            clearServeteval(time);
            var adiv=document.querSeletor('div');
            time=setInterval(function(){
                var seep=0;
                if( opacitys>Itarget)
                    seep=-10;
                 else
                     seep=10;
                if(opacitys==Itarge){
                clearSetInterval(time);
                    }
                    else{
                    opacitys+=seep;
                    adiv.style.opacity=opactys/100;
                    }
            },100)
        }
        
    </script>
    </body>
</html>

0赞 · 0采集

weixin_慕后端6529359 2020-05-26

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height:200px;
background: red;
filter:alpha(opacity=30);
opacity: 0.3;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
starmove(100);
}
oDiv.onmouseout = function() {
starmove(30);
}
}
var timer = null;
var alpha = 30;
function move(iTarget) {
var alpha = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(alpha < iTarget) {
speed = 10;
}
else {
speed = -10;
}
if(alpha == iTarget){
clearInterval(timer);
}
else{
alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},40)
}
</script>
<div id="div1">
</div>
</body>
</html>

0赞 · 0采集
xiaowan321 2019-08-19

if(alpha == iTarget){
clearInterval(timer);
}
else{
alpha+=speed;
oDiv.style.filter = 'alpha(opactiy:'+alpha+')';
oDiv.syle.opacity = alpha/100;
}

截图
0赞 · 0采集
little慕慕 2019-08-08

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 400px;
height: 400px;
background: red;
/* filter:alpha(opacity=30); */
opacity: 0.3;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(100);
}
oDiv.onmouseout = function() {
move(30);
}
}
var timer = null;
var opa = 30;
function move(target) {
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(opa < target) {
speed = 10;
}
else {
speed = -10;
}
if(opa == target){
clearInterval(timer);
}
else{
opa += speed;
// oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = opa/100;
}
},40)
}
</script>
<div id="div1">
</div>
</body>
</html>

0赞 · 0采集
qq_心安有个你_0 2019-07-27

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
           margin: 0;
           padding: 0;
       }
       #div1{
           width: 200px;
           height: 200px;
           background: red;
           filter: alpha(opcity:30);
           opacity: 0.3;
       }
       </style>
   </head>
   <body>
       <div id="div1">


       </div>
   </body>
   <script>

       window.onload=function(){
           var oDiv=document.getElementById('div1');

           oDiv.onmouseover=function(){
               startMove(100);
           }
           oDiv.onmouseout=function(){
               startMove(30);
           }

       }
       var timer=null;
       var alpha=30;
       function startMove(iTarget){
           var oDiv=document.getElementById('div1');
           clearInterval(timer);

           timer=setInterval(function (){





               var speed=0;
               if(alpha>iTarget){
                   speed=-10;
               }
               else{
                   speed=10;
               }

               if(alpha==iTarget){
                   clearInterval(timer);
               }
               else{
                   alpha+=speed;
                   oDiv.style.filter='alpha(opactiy:'+alpha+')';
                   oDiv.style.opacity=alpha/100;
               }

           });
       }






   </script>

</html>

0赞 · 0采集
weixin_慕函数6093326 2019-01-17

fliter标签

截图
0赞 · 0采集
weixin_慕函数6093326 2019-01-17

fliter标签

截图
0赞 · 0采集
慕粉2308425049 2018-07-17

ele.offsetXX 只有宽高左右
filter：alpha（opacity：30）；css中透明度30
opacity：0.3
ele.style.fiter = 'alpha(opactiy:'+alpha + 速度+')';
ele.style.opacity = (alpha+速度)/100;

0赞 · 0采集
贝壳壳 2018-04-12

1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。
注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=100)
2、由于无法获取对象的透明度，所以可通过变量储存。（var alpha=初始值 alpha+=speed）
3、IE：style.filter=‘alpha(opactiy:’+值+')' 非IE .style.opactiy=值/100（火狐或者chrome关于透明度的满值1，IE是100）

3赞 · 2采集
刀不磨要生锈 2018-04-10

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改变透明度</title>
<style type="text/css">
#div1{
width:160px;
height:160px;
background-color:red;
filter: alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");

oDiv.onmouseover = function(){
startMove(100);
}
oDiv.onmouseout = function(){
startMove(30);
}

var timer = null;
var alpha = 30;

function startMove(target){
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function(){

var speed = 0;
if(alpha > target){
speed = -10;
}else{
speed = 10;
}

if(alpha == target){
claerInterval(timer);
}else{
alpha+=speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},30);
}
}
</script>
</head>

<body>
<div id=div1></div>
</body>
</html>

1赞 · 0采集
Rolla 2018-03-06

filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。

0赞 · 0采集
lck493 2018-01-29

 opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。. 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity属性值是0~1*/ 【没有直接的属性可以改变透明度，需要定义一个alpha】 var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer); }else{ alpha += speed; oDiv.style.filter = "alpha(opactiy:"+alpha+")";（IE） oDiv.style.opactiy = alpha/100;（火狐或chrome，它们的这个系数的满值是100，这里需要的满值是1） } },30) }

0赞 · 1采集
取经者 2017-12-06

speed为负其实代表的不是移动速度，而是要减去的px

截图
0赞 · 0采集
取经者 2017-12-06

speed为负其实代表的不是移动速度，而是要减去的px

截图
0赞 · 0采集
Yeah___ 2017-12-01

如果不想重复运动,在函数执行前清除定时器clearInterval()

0赞 · 0采集
慕仙5237505 2017-11-01

var timer=null; var alpha=30;

截图
0赞 · 0采集
慕仙5237505 2017-11-01

2课 body{margin:0; padding:0;} div{width:200px; height:200px; background:#f00; filter:opacity(30); opacity:0.3; } window.onload=function(){ odiv=document.getElementById("div1"); odiv.onmouseover=function(){ move(100); } odiv.onmouseout=function(){ move(30); } } function move(target){ odiv=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>target){ speed=-10; }else{ speed=10; } if(alpha==target){ clearInterval(timer); }else{ alpha += speed; odiv.style.filter="alpha(opacity:"+alpha+")"; odiv.style.opacity=alpha/100; } },500) };

截图
0赞 · 0采集
慕仙5237505 2017-11-01

var alpha = 30;通过比较和target的值，通过speed步长累加来赋值给opacity来改变透明度

截图
0赞 · 0采集
慕仙5237505 2017-11-01

连贯：

截图
0赞 · 0采集
慕仙5237505 2017-11-01

第二部：

截图
0赞 · 0采集
慕仙5237505 2017-11-01

第一步：

截图
0赞 · 0采集
慕仙5237505 2017-11-01

对比上节课代码

截图
0赞 · 0采集
hwan 2017-10-30

透明度css代码

截图
0赞 · 0采集
_不知不知_ 2017-10-11

为什么要新定义一个alpha存储透明度，而不直接用oDiv.style.filter或oDiv.style.opacity与目标判断： style对象只能获取通过HTML标签的style特性定义的样式，对于opacity特性是定义在<style>内嵌标签内的样式，odiv.style.opacity=" "结果为空。

0赞 · 0采集
qq_与陌Dance_0 2017-08-17

 opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。 <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function() { startMove(100); } oDiv.onmouseout = function() { startMove(30); } } var alpha = 30; var timer = null; function startMove(target) { var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function() { var speed = 0; if (alpha > target) { speed = -10; } else if (alpha < target) { speed = 10; } if (alpha == target) { clearInterval(timer); } else { alpha += speed; oDiv.style.filter = 'alpha(opacity' + alpha + ')'; oDiv.style.opacity = alpha / 100; } }, 30) } </script>

0赞 · 0采集
碎碎念o_o4253196 2017-08-16

 opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。. 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity属性值是0~1*/ 【没有直接的属性可以改变透明度，需要定义一个alpha】

0赞 · 0采集
qq_云在飘_04040030 2017-05-16

 opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。

截图
1赞 · 1采集
慕粉1441139954 2017-05-16

window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(100);} oDiv.onmouseout = function(){ startMove(30);} var timer=null; function startMove(iTarget){ var oDiv = document.getElementById('div'); clearInterval(timer); timer = setInterval(function(){ if(oDiv.offsetAlpha == iTarget },30)

0赞 · 0采集
Clptt4359805 2017-04-27

 opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。. 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity属性值是0~1*/ 【没有直接的属性可以改变透明度，需要定义一个alpha】

1赞 · 2采集

数据加载中...