js控制元素旋转速度

最新推荐文章于 2022-02-27 15:33:53 发布
最新推荐文章于 2022-02-27 15:33:53 发布
阅读量2.1k 收藏 4
点赞数
分类专栏： JavaScript案例 文章标签： 前端 js 元素旋转 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43666825/article/details/102653897
版权

本来是项目中需要画一个叉叉，在一个单独的html页面中利用四个三角形挡住父元素的背景颜色的方法画出来之后，一时兴起用js让它转了起来，最后写了两个按钮控制了速度。
在这里插入图片描述

源码：

<!-- /* 
* @Author: Chauncey Yuan  
* @Date: 2019-10-20 20:46:37  
* @Last Modified by: Chauncey Yuan  
* @Last Modified time: 2019-10-19 22:46:37 
*/ -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .main {
            width: 300px;
            height: 300px;
            background-color: #ab15fd;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
            border-radius: 20px;
            transform: rotate(0deg);
        }
        
        .top {
            width: 0px;
            height: 0px;
            border-top: 120px solid #fff;
            border-left: 120px solid transparent;
            border-right: 120px solid transparent;
            position: absolute;
            top: 0;
            left: 30px;
        }
        
        .left {
            width: 0px;
            height: 0px;
            border-left: 120px solid #fff;
            border-top: 120px solid transparent;
            border-bottom: 120px solid transparent;
            position: absolute;
            left: 0;
            top: 30px;
        }
        
        .right {
            width: 0px;
            height: 0px;
            border-right: 120px solid #fff;
            border-top: 120px solid transparent;
            border-bottom: 120px solid transparent;
            position: absolute;
            right: 0;
            top: 30px;
        }
        
        .bottom {
            width: 0px;
            height: 0px;
            border-bottom: 120px solid #fff;
            border-left: 120px solid transparent;
            border-right: 120px solid transparent;
            position: absolute;
            bottom: 0;
            left: 30px;
        }
        
        .btn {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: #f00;
            position: absolute;
            top: 140px;
            left: 140px;
        }
        
        .speed {
            width: 300px;
            height: 50px;
            margin: 0 auto;
            margin-top: 150px;
            display: flex;
        }
        
        .down,
        .num,
        .up {
            /* display: block; */
            width: 120px;
            height: 50px;
            background-color: #ab15fd;
            text-align: center;
            line-height: 50px;
            font-size: 25px;
            color: #fff;
        }
        
        .down:hover,
        .up:hover {
            cursor: pointer;
        }
        
        .num {
            background-color: #fff;
            color: #ab15fd;
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="top"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
        <div class="btn"></div>
    </div>
    <div class="speed">
        <div class="down">减速</div>
        <div class="num"></div>
        <div class="up">加速</div>
    </div>
    <script>
        // 定义旋转角度
        var i = 0;
        // 定义初始速度
        var speed = 1;
        // 获取速度显示区域
        var num = document.getElementsByClassName("num")[0];
        // 写入初始速度
        num.innerHTML = speed;
        // 为减速按钮添加单击事件
        document.getElementsByClassName("down")[0].onclick = function() {
            // 如果速度大于0
            if (speed > 0) {
                // 速度减一
                speed--;
            }
            // 写入速度到页面
            num.innerHTML = speed;
        }
        为加速按钮添加单击事件
        document.getElementsByClassName("up")[0].onclick = function() {
            // 如果速度大于45
            if (speed < 45) {
                // 速度加一
                speed++;
                // 写入速度到页面
                num.innerHTML = speed;
            }
        }

        // 定义定时器
        var timer = setInterval(function() {
            // 设置旋转角度
            document.getElementsByClassName("main")[0].style.transform = "rotate(" + i + "deg)";
            // 旋转角度逐渐变化
            i += speed;
            // 防止角度无线变大
            if (i > 20000) {
                i = 0;
            }
        }, 20);
    </script>
</body>

</html>
袁成新（Chauncey Yuan）
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 控制图片左右旋转
05-10
js 控制图片左右旋转 兼容ie ff js 控制图片左右旋转 js 控制图片左右旋转 js 控制图片左右旋转
JS 简单的操作杆旋转实现
不定时分享最优质的网络技术与教程，满满的干货。
01-01 792
主要是通过鼠标滑动事件控制“控制球”位置更改及获取以屏幕上方向为0度的角度计算，来控制“方向盘”进行旋转。首先说明一下，请直接忽略背景图，这里主要实现的是杆旋转控制方向盘旋转。转换为旋转角度供外界使用，代码拙劣，大神勿笑[抱拳][抱拳][抱拳]代码很简单，其中通过计算来控制小球的位置移动，并将时时的鼠标滑过的。4、暴露控制球与控制区域中心形成的旋转角度，触发外界事件（是否进入到控制球，如果进入，控制小球随着鼠标进行移动。2、鼠标划出控制区域，控制球复位，旋转角度归零。鼠标移出控制区域，控制球复位。
用JavaScript实现元素自动旋转功能
qq_49249150的博客
08-17 7195
用JavaScript实现元素自动旋转功能 JavaScript模块 <script> //声明一个函数 function rotate() { //每隔100毫秒调用一次fun函数（调整旋转速度的地方） setInterval(fun, 100) } //声明一个number类型的变量 var deg = 0; //声明一个函数
简单的html中js实现图片中心旋转
03-17
简单的html中js实现图片中心旋转
简单JS之旋转--记录一下平常会用到的简单功能，封装成函数方便以后使用
m0_48889470的博客
06-05 1096
function rotate(obj,direction,speed){//对象，方向，速度， var rotateVal=0 var dir=direction!==undefined?direction:true var spe=speed||0.1 this.run=()=>{ this.timer = setInterval(function() { rotateVal += 1; obj.style.transform = 'rotat.
JS实现图片平面旋转的方法
10-22
主要介绍了JS实现图片平面旋转的方法,涉及JavaScript操作页面元素样式动态变换的相关技巧,需要的朋友可以参考下
js根据鼠标移动速度背景图片自动旋转的方法
10-24
`RunTime`变量用于跟踪时间，以便控制旋转速度，`cntr`则用于限制动画的循环次数。最后，使用`setTimeout`函数来定时调用自身，形成动画的连续帧。 这个实例通过JavaScript实现了基于鼠标移动速度的背景图片自动...
JavaScript控制图片向左向右连续旋转
12-02
总结来说，实现JavaScript控制图片向左向右连续旋转主要涉及以下几个关键知识点： 1. JavaScript基础：包括事件处理、DOM操作等。 2. CSS3的`transform`属性，尤其是`rotate`函数的应用。 3. 使用CSS3的`transition...
js+css3实现旋转效果
10-20
在本文中，我们将深入探讨如何使用JavaScript（js）与CSS3结合实现元素的旋转效果。旋转效果在网页设计中很常见，例如按钮点击反馈、动画效果等，它能增加交互性和视觉吸引力。以下是对标题和描述中所述知识点的详细...
JS实现太极旋转思路分析
10-20
通过CSS创建太极图的形状，然后用JS控制其旋转，结合两者实现动态效果。这不仅可以加深对CSS和JS交互的理解，同时也能提升前端动画设计的能力。希望这个分析对你在学习或工作中有所帮助，持续实践和探索将使你对前端...
js实现3d旋转效果完整源码
08-14
原生js代码实现12张图片的3d旋转效果
Javascript加速运动与减速运动
weixin_34221775的博客
12-11 315
加速运动，即一个物体运动时速度越来越快；减速运动，即一个物体运动时速度越来越慢。现在用Javascript来模拟这两个效果，原理就是用setInterval或setTimeout动态改变一个元素与另外一个元素的距离，如xxx.style.left或xxx.style.marginLeft，然后每次运动后都使速度增加，这样加速运动的效果就出现了，减速运动是同样的道理。 下面是两个示例： 加速运动...
CSS transform属性＋js requestAnimationFrame函数实现旋转方块以及调整转动速度
weixin_44667515的博客
02-27 1280
遇到了一个面试题目，要求点击该div,div开始转动,再次点击转动速度增加点击stop按钮,div转动速度减小，使用requestAnimationFrame实现。 <style> #rotate { background-color: red; width: 200px; height: 100px; margin-top: 100px;
网页loading效果 可以通过js控制旋转速度
weixin_30387423的博客
09-30 261
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页loading效果 可以通过js控制旋转速度</title> <style type="text/css"&...
js实现图片旋转
daxiang的专栏
04-10 5831
1 使用jQueryRotate.js实现 示例代码： 测试结果：chrome下效果正常，旋转后img对象仍为img对象；ie8下效果正常，但旋转后img对象变为其它对象，由于对象变化，若旋转后仍按原来方法获取img对象，则会报js错误。欲获取image对象，可根据class获取。如果图像旋转后，不进行其它操作，则可用此方法。若进行其它操作，如放大、缩小图像，则此方法实现较复杂。  
原生JS实现各种运动之匀速运动
越陌度阡
08-17 1103
给大家分享一个用原生JS实现的匀速运动，效果如下： 需要注意的是，这种运动效果在实际的开发中用的比较少，用的更多的还是弹性运动和缓冲运动，以下是代码实现，欢迎大家复制粘贴及吐槽。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/htm.........
js运动之一（匀速，折返，缓冲，加速）
qq_34763438的博客
09-08 319
有需要的小伙伴访问我的简书http://www.jianshu.com/p/44230e2b2dc7
webgl第21课-复合动画-button控制三角形的旋转速度
谷子的博客
07-29 3283
需要电子档书籍可以Q群：828202939   希望可以和大家一起学习、一起进步！！纯手打！！ 上一节课我们学习了复合变换动画，是先给它们加入了缩放和平移，然后恒定速度的三角形旋转动画案例 这一节课我们将学习复合变换动画的基础上...
HTML怎么设置动画速度,js动画（1）——速度动画
weixin_30998797的博客
06-07 734
html>body{margin: 0px;padding: 0px;}.red{background-color:red;width:200px;height:200px;position:relative;left:-200px;top:0px;}.blue{background:blue;width:20px;height:50px;position:absolute;left:20...
three.js控制glb模型旋转
最新发布
06-04
使用Three.js控制glb模型旋转可以通过以下步骤来实现： 1. 首先需要引入Three.js库和GLTFLoader.js库，可以在html中添加以下代码： ``` <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/loaders/GLTFLoader.js"></script> ``` 2. 加载glb模型并创建场景和相机： ``` const loader = new THREE.GLTFLoader(); let scene, camera; loader.load('path/to/model.glb', function(gltf) { scene = gltf.scene; camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; scene.add(camera); scene.rotation.x = Math.PI / 2; // 旋转场景以便更好地查看模型 animate(); }); ``` 3. 创建一个渲染器并将其添加到DOM中： ``` const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 4. 创建一个函数来更新场景： ``` function animate() { requestAnimationFrame(animate); scene.rotation.y += 0.01; // 控制模型的旋转速度 renderer.render(scene, camera); } ``` 5. 最后在HTML中添加一个canvas元素，将渲染器的dom元素赋值给canvas元素的context属性： ``` <canvas id="canvas"></canvas> <script> const canvas = document.getElementById('canvas'); canvas.getContext('2d').drawImage(renderer.domElement, 0, 0); </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值