JS动画以及封装

1、定时器动画案例

（1）协议按钮禁止

 var btn = document.querySelector("button")

 var num = 5
    btn.disabled = true
var Timer  = setInterval(function(){
        num--
        btn.innerHTML = "请仔细阅读协议("+num+")"
        if(num ==0){
            clearInterval(Timer)
            btn.innerHTML = "同意"
            btn.disabled = false
        }
    },1000)
 
案例二 手机短信等待
var btn = document.querySelector("button")
var Timer

btn.onclick = function(){
    var num = 60
    btn.disabled = true
    clearInterval(Timer)
Timer = setInterval(function(){
    num--
    btn.innerHTML = "请"+num+"后重新发送"

    if(num ==0){
        clearInterval(Timer)
        btn.innerHTML = "请重新发送"
        btn.disabled = false
    }
},1000)
}
 
JS的动画案例

js的动画如何实现

利用js的事件，配合定时器，或者改变它的样式属性，比如颜色，位置等来完成

 
 
案例1：物体渐变 （透明度改变）

利用opacity与定时器，注意小数相减的问题

var num = 1
    document.querySelector("div").onclick = function(){
        // 保留this指向
        var that  = this
        var timer = setInterval(function(){
            num -= 0.1
            that.style.opacity = num
        },100)
    }
 
案例3：物体移动
利用定位或者 margin
 var btn1 = document.getElementById("btn1");
  var box = document.getElementById("box");
  var leftObj = 0;
  function changePosition(step, maxLength, time) {
    var timer = setInterval(function () {
      if (leftObj < maxLength) {
        leftObj += step;
      } else {
        clearInterval(timer);
      }
      box.style.left = leftObj + "px";
    }, time);
  }
  btn1.onclick = function () {
    changePosition(5, 400, 10);
  };
 
 
offset client  scroll 系列
(1)offset 系列
offsetLeft：获取元素距离最左边的距离

    (1)、如果父元素没有定位，距离浏览器最左侧的距离

    (2)、如果父元素有定位，距离父元素最左侧的距离

offsetTop:获取元素距离最上边的距离

(1)、如果父元素没有定位，距离浏览器最上侧的距离

(2)、如果父元素有定位，距离父元素最上侧的距离

 

（2）scroll系列

scrollTop 和 scrollLeft :获得内容卷曲出去得高度和宽度

scrollWidth和scrollHeight:获得元素的实际宽度和高度，在内容没有超出盒子时，获得的是盒子的内部高度和宽度。内容超出盒子时获得的是内容实际应有的高度和宽度。当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条。

 

（3）.client系列

clientTop 和 clientLeft   获得上边框和左边框得宽度

clientWidth 和 clientHeight  获取可视范围得宽度，高度

 

轮播图之自动轮播

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #bigbox{
            margin: 100px auto;
            width: 400px;
            overflow: hidden;
            height: 300px;
            border: 2px solid red;
            font-size: 0;
        }
        img{
            width: 400px;
            height: 300px;
        }
    </style>
<body>
    <div id="bigbox">
        <div id="box">
            <img src="./image/表情包1.gif" alt="">
            <img src="./image/表情包2.gif" alt="">
            <img src="./image/表情包3.gif" alt="">
            <img src="./image/表情包4.gif" alt="">
        </div>
    </div>
</body>
<script>
    //设置div宽度
    var bigbox = document.getElementById("bigbox")
    var box = document.getElementById("box")
    var imgArr = document.getElementsByTagName("img")
    box.style.width = 400 * imgArr.length + "px";
    var num = 0
   var timer =  setInterval(function(){
        bigbox.scrollLeft = num * imgArr[num].clientWidth;
        ++num
        if(num>=imgArr.length){
            num = 0;
        }
        move(bigbox.scrollLeft,num * imgArr[num].clientWidth)
        // console.log(imgArr[num].offsetWidth)
    },2000)

    function move(start,end,time = 10){
        var step = 0
        var maxstep = 100
        var everystep = (end-start)/maxstep
        // console.log(everystep)
        var timer2 = setInterval(function(){
            if(step>=maxstep){
                clearInterval(timer2)
            }else{
                bigbox.scrollLeft = Math.ceil(bigbox.scrollLeft)+everystep
            }
            step++
        },time)
    }
</script>
posted @ 2021-12-14 21:09  ..Shmily  阅读(60)  评论(0)    收藏  举报