zoukankan      html  css  js  c++  java
  • 慕课网多物体运动源代码

    慕课网多物体运动源代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>多物体运动</title>
    <style>
    ul,li{
    list-style: none;
    }
    ul li{
    200px;
    height:100px;
    background:yellow;
    margin-bottom: 20px;
    }
    </style>
    <script>
    window.onload=function(){
    var ali=document.getElementsByTagName('li');
    for(var i=0;i<ali.length;i++){
    ali[i].timer=null
    ali[i].onmouseover=function(){
    startMove(this,400);
    }
    ali[i].onmouseout=function(){
    startMove(this,200);
    }
    }
    }
    // var timer=null;
    function startMove(obj,iTarget){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
    var speed=(iTarget-obj.offsetWidth)/8;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if(obj.offsetWidth==iTarget){
    clearInterval(obj.timer);
    }else{
    obj.style.width=obj.offsetWidth+speed+'px';
    }
    },30)
    }
    </script>
    </head>
    <body>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </body>
    </html>
    慕课网视频网址http://www.imooc.com/video/3048
  • 相关阅读:
    ETF上线技术要素
    oracle修改用户的schema
    list
    交易系统分类OMS/EMS
    类的大小2
    webpack5教程
    vue配置stylelint教程
    提高国内访问 GitHub 的速度的 9 种方案
    git常见的操作
    img 图像底部留白的原因以及解决方法
  • 原文地址:https://www.cnblogs.com/milkytea/p/6986152.html
Copyright © 2011-2022 走看看