JS动画效果_技术笔记

一只小马甲甲 2020-07-01

JS设置css值 XXX.style.xxx 获取css值 XXX.offsetxxx
比如　oDiv.style.left = oDiv.offsetLeft + 10 + 'px';

截图
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: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span {
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
</head>
<body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(0);
}
oDiv.onmouseout = function() {
move(-200);
}
}
var timer = null;
function move(dis) {
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function() {
var speed = 0;
if(oDiv.offsetLeft > dis){
speed = -10;
}
else {
speed = 10;
}
if(oDiv.offsetLeft == dis) {
clearInterval(timer);
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30)
}
</script>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
1赞 · 7采集
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;
           position: relative;
           left: -200px;
           top: 0;
       }
       #div1 span{
           width: 20px;
           height: 50px;
           background: blue;
           position: absolute;
           left: 200px;
           top:75px;
       }
       </style>
   </head>
   <body>

       <div id="div1">
           <span id="share">xc</span>
       </div>


   </body>

   <script>

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

           oDiv.onmouseover=function(){
               startMove(10,0);
           }
           oDiv.onmouseout=function(){
               startMove1(10,-200);
           }


       }
       var timer=null;
       function startMove(sleep,taiger){
           clearInterval(timer)
           var oDiv=document.getElementById('div1');
           timer=setInterval(function(){
               if(oDiv.offsetLeft==taiger){
                   clearInterval(timer);
               }
               else{
                   oDiv.style.left=oDiv.offsetLeft+sleep+'px';
               }
           },30);
       }

       function startMove1(sleep,taiger){
           clearInterval(timer)
           var oDiv=document.getElementById('div1');
           timer=setInterval(function(){
               if(oDiv.offsetLeft<= taiger){
                   clearInterval(timer);
               }
               else{
                   oDiv.style.left=oDiv.offsetLeft-sleep+'px';
               }
           },30);
       }

   </script>



</html>

2赞 · 0采集
慕函数6103035 2018-11-09

用offsetLeft是因为left可读写，且offset返回的是数值，left返回的是字符串

0赞 · 0采集
NecessaryC 2018-08-05

setInterval（函数，毫秒）定时器
onmouseover 鼠标移入
onmouseout 鼠标移出
object.style.left 修改left
object.offsetLeft 当前的left
object.style.left=object.offsetLeft+num'px'
clearInterval 清除定时器
记得一开始执行函数的时候应该清空定时器

2赞 · 4采集
哈尔波儿 2018-08-01
setInterval（函数，毫秒）；定时器
ele.style.left 修改left
ele.offsetLeft 当前的left
ele.style.left = ele.offsetLeft + n + 'px' 记得加px
timer = 定时器
clearInterval（timer）；清空定时器
记得一开始执行函数的时候应该清空定时器
1. onmouseover 鼠标移入
2. onmouseout鼠标移除
3. position:relative;指相对于自己原本的位置偏移；position:absolute;指相对于父元素的定位
4. <span></span>是行内元素，要添加position或者display才能设置宽度和高度
5. 设置圆角半径border-radius
6. 元素运动的单位距离跟运动范围长度相关，距离为非整数时，单位距离设置成整数可能出现问题，要注意调整
0赞 · 0采集
慕粉2308425049 2018-07-17

setInterval（函数，毫秒）；定时器
ele.style.left 修改left
ele.offsetLeft 当前的left
ele.style.left = ele.offsetLeft + n + 'px' 记得加px
timer = 定时器
clearInterval（timer）；清空定时器
记得一开始执行函数的时候应该清空定时器

0赞 · 0采集

Number_1 2018-06-11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS速度动画</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .shareWrap{
            width: 200px;
            height: 150px;
            background: burlywood;
            margin-top: 50px;
            position: relative;
            left: -200px;
        }
        .shareWrap .share{
            display: inline-block;
            width: 22px;
            background: aquamarine;
            padding: 2px 4px;
            position: absolute;
            top: 0;
            right: -30px;
        }
    </style>
</head>
<body>
<div class="shareWrap" id="shareWrap">
    <span class="share">分享</span>
</div>
<script>
   window.onload = function() {

       var oDiv = document.getElementById('shareWrap');
       var timer = null;
       // 鼠标移入按钮动画
 oDiv.onmouseover = function(){
           startMove(0);
       };
       function startMove(iTarget){
           clearInterval(timer);
           timer = setInterval(function(){
               var speed = 0;
               if (oDiv.offsetLeft > iTarget){   // 当左侧偏移量大于目标位置时，那么速度是向左移动，为负值， 否则为正值
 speed = -10;
               }else{
                   speed = 10;
               }
               if (oDiv.offsetLeft === iTarget){  //当元素移动到目标位置时，清除定时器停止移动
 clearInterval(timer);
               }else{
                   oDiv.style.left = oDiv.offsetLeft + speed + 'px';
               }
           },30);

       }
       // 鼠标移出按钮动画
 oDiv.onmouseout = function(){
           startMove(-200);
       }
   }
</script>
</body>
</html>

0赞 · 10采集

qq_善水_0 2018-05-16

代码截图

截图
0赞 · 0采集
贝壳壳 2018-04-12
1. 定时器
2. onmouseover 鼠标移入
3. onmouseout鼠标移除
4. odiv.offsetLeft odiv的当前left值
5. 在两个代码很相似的情况下，可以把不同的地方挑出来作为参数传进去（如鼠标移入与鼠标移除的函数）
1赞 · 0采集
刀不磨要生锈 2018-04-10

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分享</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background-color: blue;
position:absolute;
left: 200px;
top: 75px;
}
</style>

<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");//oDiv是局部变量，只在此函数内有效
//鼠标移入事件
oDiv.onmouseover=function(){
starMove(0);
}
//鼠标移出事件
oDiv.onmouseout=function(){
starMove(-200);
}

var timer = null;
function starMove(target){
clearInterval(timer);//解决“speed”的叠加问题
var oDiv=document.getElementById("div1");
//创建一个定时器timer
timer=setInterval(function(){

var speed =0;
if(oDiv.offsetLeft > target){
speed = -10;
}else{
speed = 10;
}

if(oDiv.offsetLeft==target){
clearIntral(timer);//符合条件运动停止
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>

</head>
<body>
<div id = div1>
<span>分享</span>
</div>
</body>
</html>

5赞 · 2采集
GYNexus 2018-03-23

offsetLeft：当前值

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

匀速运动：<br> 1、设置定时器，每隔一段时间更改位置，达到匀速运动<br> 2、设置定时器前需清除定时器，以防多次触发重复生成多个定时器<br> 3、当运动位置达到目标值时，可通过清除定时器停止运动<br> 4、当定义函数多处相同时，可封装为一个函数，用不同参数调用，尽量少传递相同的参数<br>

1赞 · 1采集
前端沙雕 2018-01-05

offsetleft是当前的left的值。

0赞 · 1采集
T002967 2017-11-10

类似的函数可以把不同的地方取出作为参数传入，避免重复

0赞 · 1采集
T002967 2017-11-10

写定时器setInterval函数第一条要清楚定时器，否则会多次触发多个定时器

1赞 · 1采集
T002967 2017-11-10

写动画前要清楚浏览器默认样式*{margin:0;padding:0} 否则px会跳跃

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

改2：function out(target,speed){ odiv=document.getElementById("div1"); clearInterval(timer); setInterval(function(){ if(odiv.offsetLeft<=target){ clearInterval(timer); }else{ odiv.style.left=odiv.offsetLeft+speed+"px"; } },500); } 该3：//改 3： function move(target){ clearInterval(timer); odiv=document.getElementById("div1"); timer = setInterval(function(){ var speed=0; if(odiv.offsetLeft>target){ speed = -10; }else{ speed=10; } if(odiv.offsetLeft>=target){ clearInterval(timer); }else{ odiv.style.left =odiv.offsetLeft + speed+"px"; //变大 } },500); }

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

1：第一次<body> <div id="div1"><span id="share">分享</span></div> </body> div{ width:200px; height:200px; background:#f00; position:relative; top:0; left:-200px; } div span{ width:20px; height:70px; background:#0f0; position:absolute; top:75px; left:200px; } window.onload=function(){ odiv=document.getElementById("div1"); odiv.onmouseover=function(){ // 1:move(); // 2:move(10,0); move(0); } odiv.onmouseout=function(){ // 1:out(); // 2:move(-10,-200); move(-200); } } function out(){ odiv=document.getElementById("div1"); clearInterval(timer); setInterval(function(){ if(odiv.offsetLeft<=-200){ clearInterval(timer); }else{ odiv.style.left=odiv.offsetLeft-10+"px"; } },500); }

截图
0赞 · 0采集
慕仙5237505 2017-10-31

感觉不对

截图
0赞 · 0采集
慕仙5237505 2017-10-31

eeeee

截图
0赞 · 0采集
慕仙5237505 2017-10-31

动画效果

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

<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function() { startMove(0); } oDiv.onmouseout = function() { startMove(-200); } } var timer = null; function startMove(target) { clearInterval(timer);//清除计时器 var oDiv = document.getElementById("div1"); var speed = 0; timer = setInterval(function() { if (oDiv.offsetLeft < target) { speed = 1; } else if (oDiv.offsetLeft > target) { speed = -1; } if (oDiv.offsetLeft == target) clearInterval(timer);//当面板移动到目标位置时结束计时器 else { oDiv.style.left = oDiv.offsetLeft + speed + "px"; } }, 30) } </script>

0赞 · 2采集
浅尝 2017-07-16

阿斯顿

0赞 · 0采集
浅尝 2017-07-16

慕课网笔记发布失败

截图
0赞 · 0采集
lemonade1172 2017-07-01

注意避免硬编码即在函数的判断之中直接使用具体的值如10，20等，应该把这些变化的值作为参数传入函数内部，即美观也方便后来的修改。

截图
0赞 · 0采集
守候YouT 2017-04-27

创建定时器：setInterval(function(){ },30) 先清空定时器，在判断条件。clearinterval（）;

0赞 · 1采集
元气满满来学习 2017-04-12

offsetLeft当前的left值

0赞 · 0采集
慕工程3747394 2017-04-08

参数越少越好，所以去掉一个参数，对另外一个参数进行判断

截图
0赞 · 0采集
慕工程3747394 2017-04-08

参数的使用

截图
1赞 · 1采集

数据加载中...