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

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>

附上效果图（现在是八点零一）：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现点击图片改变页面背景图的方法

    本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0"> <script language=&qu

  • js实现图片区域可点击大小随意改变(适用移动端)代码实例

    js实现图片区域可点击大小随意改变(适用移动端)代码实例

    实现图片区域可点击,实际上使用map是可以的,但是适配效果并不好,图片只能是固定大小的值,而且点都被写死了. 在这里,我使用的js基于canvas写的一个小工具.可以圈出你需要点击的部分,然后生成一串json,在预览页面就可以看见效果了: 在实际应用中,只要用工具处理一下图片,再把数据存入数据库,就很方便了: 使用工具时,先上传图片.然后就可以圈了,圈完一定要记得,点击保存数据,,,接着就可以预览了,预览点击的效果,可以看控制台, 首先是工具 首先工具的html <!DOCTYPE html>

  • Vue.js点击切换按钮改变内容的实例讲解

    代码实例: 代码描述:点击切换按钮,来改变显示的内容,切换不同的单位.flag相当于一个开关,控制开关的改变,来切换不同的单位.同样适用于其他的切换内容实例,也可设置按钮点击显示隐藏等. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换改变内容</title> <script src="https://cdn.bo

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

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

    JavaScript之点击改变图片形状(transform的应用),供大家参考,具体内容如下 附上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform的运用</title> <style type="text/css"> #box{ width: 50

  • JavaScript实现点击出现图片并统计点击次数功能示例

    JavaScript实现点击出现图片并统计点击次数功能示例

    本文实例讲述了JavaScript实现点击出现图片并统计点击次数功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击出现图片,再次点击循环出现</title> </head> <body> <script type="text

  • JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    本文实例讲述了JavaScript实现点击单选按钮改变输入框中文本域内容的方法.分享给大家供大家参考.具体如下: 这里实现点击单选按钮改变输入框中文本域内容的方法,是一个JavaScript 的简单应用,可以减少用户的输入,提升用户操作易用性,它类似一个TAB选项卡一样的功能,并可以完成后提交表单,值得学习. 运行效果截图如下: 具体代码如下: <html> <head> <title>JavaScript点击单选框改变输入框内容</title> </

  • JavaScript实现点击单元格改变背景色的方法

    本文实例讲述了JavaScript实现点击单元格改变背景色的方法.分享给大家供大家参考,具体如下: <html> <body> <table onclick="SetColor(event)" id="_t" width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <t

  • 使用JavaScript实现点击循环切换图片效果

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单击循环切换图片</title> <script> var i = 1; function nextImg(){ i++; //步骤2:获取页面元素 var next = document.getElementById("

  • javascript实现点击图片切换

    点击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果.供大家参考: HTML代码如下: <div class="img"> <img src="images/1.jpg" id="myImg" class="myImg" alt="这里是1.jpg"> <p> <input type="button" id="

  • javascript实现点击按钮切换图片

    javascript实现点击按钮切换图片

    本文实例为大家分享了javascript实现点击按钮切换图片的具体代码,供大家参考,具体内容如下 效果图: 首先搭建基本的结构 <div id="div"> <p id="desc"></p> <!--默认显示第一张图片--> <img src="img/1.jpg" alt="加载失败" style="width: 800px;height: 400px;&qu

  • JavaScript onclick点击事件-点击切换图片且自动播放

    JavaScript onclick点击事件-点击切换图片且自动播放

    在页面中放图片并设置四个button,可以通过点击上一张下一张来切换图片(翻到最后一张自动切换到第一张).用户点击自动播放,每隔两秒自动切换(类似轮播图),点击停止播放,就终止播放,运用了定时器.先看效果图.  下面是完整的代码: <body>     <img id="img" src="./img/0.webp" alt=""><br>     //给四个button加上点击事件     <butto

  • JavaScript onclick点击事件-点击切换图片且自动播放

    JavaScript onclick点击事件-点击切换图片且自动播放

    在页面中放图片并设置四个button,可以通过点击上一张下一张来切换图片(翻到最后一张自动切换到第一张).用户点击自动播放,每隔两秒自动切换(类似轮播图),点击停止播放,就终止播放,运用了定时器.先看效果图.  下面是完整的代码: <body>     <img id="img" src="./img/0.webp" alt=""><br>     //给四个button加上点击事件     <butto

  • javascript实现点击图片切换功能

    javascript实现点击图片切换功能

    本文实例为大家分享了javascript实现点击图片切换的具体代码,供大家参考,具体内容如下 实现效果:图片点击切换 代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../reset.css"> <style> .

随机推荐