纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

js点击改变图片形状 JavaScript实现点击改变图片形状(transform应用)

知识进脑的肖老千啊   2021-04-29 我要评论
想了解JavaScript实现点击改变图片形状(transform应用)的相关内容吗,知识进脑的肖老千啊在本文为您仔细讲解js点击改变图片形状的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js点击改变图片形状,js改变图片形状,js点击改变形状,下面大家一起来学习吧。

JavaScript之点击改变图片形状(transform的应用),供大家参考,具体内容如下

附上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform的运用</title>
    <style type="text/css">
        #box{
            width: 50px;
            height: 50px;
            background-color: red;
            /*traslate 位移  rotate 旋转幅度   scale 放大幅度   skew倾斜*/
            /*transform: translate(100px,200px) rotate(20deg) scale(2.0) skew(10deg);*/
        }
    </style>
</head>
<body>
    <button id="btn">形变</button>
    <div id="box"></div>
    <script>
        window.onload = function (){
            var btn = document.getElementById("btn");
            var box = document.getElementById("box");
            var index = 0;
            btn.onclick = function (){
                index++;
                box.style.transform = `translate(${index*100}px,${index*50}px) rotate(${index*10}deg) scale(${index*1.3})`;
            }
        }
    </script>
</body>
</html>

实现效果图:

默认原始情况下:

点击形变后:

再次点击则会继续发生变化。

下边对transform的应用进行扩展,运用于时钟的走动:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字时钟案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #clock{
            width: 600px;
            height: 600px;
            background: url("img/clock.jpg") no-repeat;
            position: relative;
        }
        #hour,#minute,#second{
            position: absolute;
            width: 30px;
            height: 600px;
            left: 50%;
            margin-left: -15px;
        }
        #hour{
            background: url("img/hour.png") no-repeat;
        }
        #minute{
            background: url("img/minute.png") no-repeat;
        }
        #second{
            background: url("img/second.png") no-repeat;
        }
    </style>
</head>
<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
    <script type="text/javascript">
        // 1.获取标签
        var hour = document.getElementById("hour");
        var minute = document.getElementById("minute");
        var second = document.getElementById("second");

        // 2.开启定时器 获取当前时间
        setInterval(function (){
            // 2.1获取当前的时间戳
            var now = new Date();
            // 2.2获取小时 分钟 秒
            var s = now.getSeconds();
            var m = now.getMinutes() + s/60;
            var h = now.getHours()%12 + m/60;

            // 2.3旋转
            second.style.transform = `rotate(${s*6}deg)`;
            minute.style.transform = `rotate(${m*6}deg)`;
            hour.style.transform = `rotate(${h*30}deg)`;
        },10)
    </script>
</body>
</html>

附上效果图(现在是八点零一):


相关文章

猜您喜欢

  • python 进度条 python实现进度条的多种实现

    想了解python实现进度条的多种实现的相关内容吗,IT之一小佬在本文为您仔细讲解python 进度条的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:python,进度条,下面大家一起来学习吧。..
  • Android Studio进度条效果 Android Studio实现进度条效果

    想了解Android Studio实现进度条效果的相关内容吗,Moyoshikine在本文为您仔细讲解Android Studio进度条效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Android,Studio,进度条,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.iunios.com 【OS下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式