zoukankan      html  css  js  c++  java
  • javascript简单的滑动效果

    利用setInterval实现简单的滑动效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单滑动效果</title>
        <style type = 'text/css'>
            #btn {
                width:45px;
                height:25px;
            }
            #box1 {
                position:relative;
                top:15px;
                width:100px;
                height:100px;
                background:yellow;
                border:2px solid red;
            }
        </style>
    </head>
    <body>
        <button id="btn">提交</button>
        <div id = 'box1'>
        </div>
    </body>
        <script type = 'text/javascript'>
            var box1 = document.getElementById("box1");
            var btn = document.getElementById("btn");
            var count = 0;
            var time = null;
            btn.onclick = function(){
                time = setInterval(function(){
                    count += 2;
                    if(count === 1000){
                        clearInterval(time);
                        box1.style.display = "none";
                    }
                    box1.style.left = count + "px"
                },10)
            }
    
        </script>
    </html>
  • 相关阅读:
    边缘检测
    图片融合
    毛玻璃
    图像添加马赛克
    图像颜色反转
    图像灰度处理
    图像仿射变换/旋转
    图像剪切/位移
    图像缩放/插值
    神经网络逼近股票价格
  • 原文地址:https://www.cnblogs.com/tarantino/p/8795319.html
Copyright © 2011-2022 走看看